Cursos Empresas Blog Live Conf Eventos Precios

0:007:41

Recursos

Resumen

El atributo ngModel permite el intercambio de datos de forma bidireccional entre el componente y la vista. Lo que suceda en el componente, se verá reflejado en la vista. Lo que se suceda en la vista, inmediatamente impactará en el componente.

<input [(ngModel)]="name">

ngModel usar tanto los corchetes [] como los paréntesis (). De esta manera, se vuelve bidireccional el intercambio de datos. Si no quieres la bidirección, solo colocamos los corchetes [ngModel] para que la comunicación sea unidireccional.Para utilizar ngModel, es necesario hacer uso e importar Angular Forms. Para esto, dirígete al archivo app.module.ts que es el módulo principal de toda aplicación Angular y agrega lo siguiente:

...
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [ ... ],
  imports: [
    FormsModule
  ],
  providers: [],
  bootstrap: [ ... ]
})
export class AppModule { }

De esta manera puedes importar el módulo FormsModule desde @angular/forms y agregarlo a imports para emplear la propiedad [(ngModel)].

Aporte creado por Kevin Fiorentino.

Data binding con ngModel

Curso de Fundamentos de Angular

Clase 10 de 21

Clase 10 / 21

Lindsay Rodríguez

Hace 5 años

Me sucede algo extraño, y es que al colocar el valor 9 en el input de edad, me aparece que es válido, pero al profesor no. ¿Alguien sabe a qué se debe eso? :,(

Ayoze Rodríguez Abreu

Hace 5 años

Si compartes el código podremos ayudarte

Lindsay Rodríguez

Hace 5 años

El código HTML sería este:

<h2>NgModel</h2>
<p>Nombre {{person.name}} </p>
<input type="text" required #nameInput="ngModel" [(ngModel)]="person.name">
<p>Valid: {{ nameInput.valid }} </p>
<p>Age {{person.age}}</p>
<input type="number" max="18" min="10" required #ageInput="ngModel" [(ngModel)]="person.age">
<p>Valid: {{ ageInput.valid }} </p>

<hr/>
<h2>Eventos</h2>
<button [disabled]="btnDisabled">Enviar</button>
<button (click)="toggleButton()">Toggle button</button>
<p>Edad {{person.age}} </p>
<button (click)="increaseAge()">Age ++</button>
<div class="box" (scroll)="onScroll($event)">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et alias repellat praesentium veniam, molestiae odio porro eius reiciendis suscipit at magnam non. Autem nesciunt molestias at nihil mollitia fugiat distinctio.
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et alias repellat praesentium veniam, molestiae odio porro eius reiciendis suscipit at magnam non. Autem nesciunt molestias at nihil mollitia fugiat distinctio.
  </p>
</div>
<p>Nombre {{person.name}} </p>
<input type="text" [value]="person.name" (keyup)="changeName($event)">

<hr/>
<h2>Propiedades</h2>
<button [disabled]="btnDisabled">Enviar</button>
<input type="text" [value]="person.name" />
<progress max="100" [value]="person.age"></progress>
<img width="100" [src]="person.avatar">

<hr/>
<h2>Hola mundo</h2>
<h3>{{ 'Hola mundo'.repeat(5) }}</h3>
<p>3 + 3 = {{3 + 3}}</p>
<h4>Hola, soy {{ name }} y tengo {{ age }}</h4>
<img src={{img}} alt="image">

Comentarios (48)48 comentarios

Rony Porraz Vargas

José Pablo Jiménez Cucanán

El banano viene del curso TypeScript con Angular por Belatrix

KEVIN DAVID GARCIA VALDES

uy!!, tendre que ver ese curso antes que este?

Andres Felipe Pinto Becerra

Recomiendo la siguiente lectura para complementar, personalmente me ha servido mucho cuando inicié hace unos meses a estudiar y trabajar con Angular. Enlace

Bryan Smith Patiño Lesmes

No está disponible :(

Luis Angel Díaz Sánchez

Hace 4 años

Muy buen aporte, gracias

Jimmy Buriticá Londoño

Apenas iniciando en Angular y ya voy viendo lo maravilloso que es este Framework.

Orlando Daniel Montes Antonio

Entonces practicamente ya ni es necesaria la función changeName()?

Nicolas Molina

Profesor

Exacto ya no sería necesaria porque el ngModel hace todo el trabajo que antes hacíamos manualmente.

Aaron Paredes Cabrera

Que potente ngModel :) 💚

Fernando Molano Castrillón

Por Dios santo que delicia es Angular. Por qué carajos no me había decidido antes a aprender esto? 🤯

Daniela Stornelli

Cómo sabe el [( ngModel )] que la función es keyup?

Alfonso Gómez Seca

Tengo un problema. Ya importé FormsModule y lo agregué a los imports en app.module.ts pero cuando quiero usar el ngModel me aparece el error:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

Segundo Juan

Tengo el mismo problema, pudiste solucionarlo?

me pasa lo mismo... y la unica solucion que se encuentra en internet es esa, que nos habremos olvidado de importarlo o agregaro a los imports, pero hice ambos...

Juan David Saldarriaga Ospina

Ahora es posible tener componentes independientes, esto permite que cada componente maneje sus dependencias de servicios, módulos u otros componentes internamente sin hacer importaciones de forma incremental como lo menciona Nico, agregando en el decorador @Component la propiedad standalone: true y la propiedad imports en la cuál se agregarían todas las importaciones que necesita el componente

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [ FormsModule ],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

Diego Fernando Caviedes Camaho

Esta parte es importante para entender los estados y ciclo de vida de angular

Gisela Angela Cristaldo

✨Tips de [(ngModel)] =”somValue”

Se encarga de estar pendiente del input y sincroniza el valor.
Para poder usar el ngModel, necesitamos agregar el módulo de AngularForm.
Debemos importar el módulo de Formularios FormModule, en nuestro módulo.

German Pinilla

++DATA BINDING CON NGMODEL++

El data binding, se refiere a una fusion entre escuchar un evento (event binding) y definir una propiedad(property binding), es la union de las dos lo que es conocido como enlace de doble via.

En angular tenemos el ngModel el cual nos servira para los inputs. Gracias a sus caracteristicas, el ngModel siempre esta pendiente del estado del input, si el campo es valido o no, la interaccion del input con el usuario y ademas, sincroniaza su valor. Ya que le daremos provecho a esta utilidad, lo mas indicado es usar uno de los paquetes de toda la gran plataforma de Angular y es el Angular Forms.

Angular forms lo podemos importar de la dependencia ++@angular/forms++ y es uno de los paquetes mas usados ya que nos ayudara a construir formularios y sus propiedades.

Sintaxis ngModel:

[(ngModel)] = "Some value";

Ejemplo de como usar el data binding con el ngModel:

<input type="text" #inputName="ngModel" [(ngModel)]="person.name"><br>
<h3><strong>{{ person?.name }}</strong></h3>

Platzi Team

Una anotacion para el equipo de Pltzi, el curso que dice el profe no esta dentro de la ruta de Angular Frontend, seria bueno depronto agregarlo.

Angular Forms

Ruta Angular Frontend

Edinson Colonia Paez

Los nuevos paquetes a instalar siempre se deben hacer en el app.module.ts. y si lo importas debe quedar en el imports para que todos los modulos lo puedan usar.

Ricardo Arquimedes Castro Quintero

interesante el concepto de incremental, no la había escuchado de esa manera, al ir agregando los paquetes que necesitamos

Daniel Meza

Esto es interesante, pero aún mas RXJS con los formularios reactivos 🔥

Jose Herrera

Al parecer no se me reconoce el min y max. Solo me cambia el true por false, validandando el required, pero el min y max los ignora. Alguien sabe por qué? Gracias!!

JOSE MARIO ANGEL GARCIA SANDOVAL

Hola José ensañanos tu codigo

Hola, creo que este link te puede ayudar a solucionar. Forms

Jasson Josué Medina Calderón

¿Cómo sabe el [(NgModel)] que el evento es un 'keyUp'?

para que es el #nameInput = "ngMOel"

Hola, es la manera de asignar a nuestra variable template nameInput el ngModel del input por eso queda así #nameInput="ngModel" es para con esto poder acceder a todos sus propiedades y ventajas del ngModel como por ejemplo hacer saber si es un campo inválido con esto nameInput.valid

muy bien explicado muchas gracias

Christell Romo

Hace 3 años

No tengo el archivo app.module.ts al crearlo e importar tengo error

No tengo éxito, me da error en AppComponent

error 1.-Component AppComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?(-996008)

error 2.-The AppComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array. Use the bootstrapApplication function for bootstrap instead.(-99600

PiPe Ramirez

Mira mi comentario.

Recursos

Resumen

Data binding con ngModel

Progreso del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

Despedida