Data binding con ngModel

Clase 10 de 21 • Curso de Fundamentos de Angular

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.

Rony Porraz Vargas

student•

José Pablo Jiménez Cucanán

student•

El banano viene del curso TypeScript con Angular por Belatrix

KEVIN DAVID GARCIA VALDES

student•

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

Andres Felipe Pinto Becerra

student•

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

student•

No está disponible :(

Luis Angel Díaz Sánchez

student•

Muy buen aporte, gracias

Jimmy Buriticá Londoño

student•

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

Orlando Daniel Montes Antonio

student•

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

Nicolas Molina

teacher•

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

Aaron Paredes Cabrera

student•

Que potente ngModel :) 💚

Fernando Molano Castrillón

student•

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

Daniela Stornelli

student•

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

Alfonso Gómez Seca

student•

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

student•

Tengo el mismo problema, pudiste solucionarlo?

Daniela Stornelli

student•

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

student•

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

student•

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

Gisela Angela Cristaldo

student•

✨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

student•

++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

student•

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

student•

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

student•

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

Daniel Meza

student•

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

Lindsay Rodríguez

student•

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

student•

Si compartes el código podremos ayudarte

Lindsay Rodríguez

student•

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">

Jose Herrera

student•

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

student•

Hola José ensañanos tu codigo

Gisela Angela Cristaldo

student•

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

Jasson Josué Medina Calderón

student•

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

Diego Fernando Caviedes Camaho

student•

para que es el #nameInput = "ngMOel"

Nicolas Molina

teacher•

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

Diego Fernando Caviedes Camaho

student•

muy bien explicado muchas gracias

Christell Romo

student•

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

student•

Mira mi comentario.

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'],
})

<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">

Data binding con ngModel

Primeros pasos

Qué es Angular: ventajas y cómo aprenderlo

Instalación de Angular CLI

Comandos de Angular para correr tu proyecto

Estructura de un proyecto en Angular

Conceptos básicos de TypeScript para usar Angular

Comunicación de datos

String interpolation

Property Binding

Introducción al Event Binding de Angular

Otros eventos que puedes escuchar

Data binding con ngModel

Estructuras de control

Uso de *ngIf

Uso de *ngFor

*ngFor para arrays

Uso de *ngSwitch

Angular Devtools

Estilos

Estilos a la lista de productos

Class and style

NgClass y NgStyle

Crear un formulario

Deploy

Despliegue con Firebase Hosting

Despedida

Continúa con el Curso de Angular: Componentes y Servicios