A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Data binding con ngModel

10/21
Recursos

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.

Aportes 12

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Data binding con ngModel

  • Importante recalcar que para hacer uso de ngModel debemos importar el 鈥淔ormModule鈥 y habilitar el mismo en app.module.ts

  • ngModel raliza un seguimiento del valor y el estado de validaci贸n de un control de formulario individual debido a las propiedades que hereda de FormControl es recomentado saber como funciona dicho proceso.

  • Podemos personalizar las validaciones que deberia tener un campo o el mismo formulario

  • Aqui utilizamos las variables de referencia (las que tienen el signo #) y debemos indicar que la variable debera tomar el valor del ngModel <<#nameInput=鈥渘gModel鈥>>

  • Se pueden realizar las validaciones que normalmente encontramos en html y con 鈥減attern鈥 podemos especificar una comprobacion como exprecion regular

  • Podemos tener un flujo de datos unidireccional con [] o bidireccional con [()]

  • Acepta inputs

  • Cuando se utiliza el ngModel sin la etiqueta <form> es necesario proporcionar un 鈥渘ombre de atributo鈥 de manera que el control pueda ser registrado en el formulario padre bajo ese nombre.

    //comportamiento del ngModel sin etiqueta <form>
      	//html
      	<input [(ngModel)]="name" #ctrl="ngModel" required>
      	//capa logica
      	name: string = '';
    //Comportamiento dentro de un form
    	//html
    	<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
    		<input name="first" ngModel required #first="ngModel">
    		<input name="last" ngModel>
        		<button>Submit</button>
    	</form>
      	//capa logica
    	onSubmit(f: NgForm) {
    	console.log(f.value);  // { first: '', last: '' }
    	console.log(f.valid);  // false
    	}
    
    En el contexto de un formulario principal, a menudo no es necesario incluir enlaces unidireccionales o bidireccionales, ya que el formulario principal se encarga de su  sincronizacion
    
  • Conceptos extra铆dos de:

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

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

鉁═ips de [(ngModel)] =鈥漵omValue鈥

  • 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.

Cuando se utiliza el ngModel sin la etiqueta <form> es necesario proporcionar un 鈥渘ombre de atributo鈥 de manera que el control pueda ser registrado en el formulario padre bajo ese nombre.

Importante recalcar que para hacer uso de ngModel debemos importar el 鈥淔ormModule鈥 y habilitar el mismo en app.module.ts

Por Dios santo que delicia es Angular.
Por qu茅 carajos no me hab铆a decidido antes a aprender esto?
馃く

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

Esto es interesante, pero a煤n mas RXJS con los formularios reactivos 馃敟

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.

Nico, gracias, va muy bien el curso