Data binding con ngModel

Data binding con ngModel

• Importante recalcar que para hacer uso de ngModel debemos importar el “FormModule” 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=“ngModel”>>

• Se pueden realizar las validaciones que normalmente encontramos en html y con “pattern” 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 “nombre 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:

  • https://developer.mozilla.org/es/docs/Learn/Forms/Form_validation
  • https://angular.io/api/forms/FormControl
  • https://angular.io/api/forms/NgModel

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.

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

Cuando se utiliza el ngModel sin la etiqueta <form> es necesario proporcionar un “nombre 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 “FormModule” 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