No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
12H
0M
35S

Data binding con ngModel

10/22
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 22

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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.

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

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>
<h2><strong>{{ person?.name }}</strong></h2>

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

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.

鉁═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.

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

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

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

si son importantes las importaciones, para que nos ayude con los modulos de angular

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

Data binding con ngModel


El ngModel es una directiva en Angular que te permite realizar Two-Way Data Binding. Con Two-Way Data Binding, puedes vincular una propiedad tanto para la lectura como para la escritura, lo que significa que tanto la vista como el componente pueden actualizar el valor de la propiedad y ambos se mantendr谩n sincronizados.

Para usar el ngModel, primero debes importar el m贸dulo FormsModule en tu m贸dulo principal:

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

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

Luego, en tu vista, puedes vincular una propiedad con el ngModel de la siguiente manera:

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

En este ejemplo, estamos vinculando la propiedad nombre con el input. Cualquier cambio en el valor del input se reflejar谩 en la propiedad nombre, y cualquier cambio en la propiedad nombre se reflejar谩 en el valor del input.

El ngModel es muy 煤til cuando trabajas con formularios en Angular, ya que te permite realizar Two-Way Data Binding con los elementos de formulario, como inputs, select y textarea. Con el ngModel, puedes simplificar mucho el proceso de recopilar y validar datos de un formulario en tu aplicaci贸n.

Para las personas que no entendieron bien el template variable es practicamente:

Piense en lo que obtendr铆a聽document.querySelector(鈥榠nput鈥) y eso es lo que tenemos aqu铆

<input type="text" #coffee>
<p>{{ coffee.value }}</p>

Esto es tan grande, que hasta tiene su propio curso, WOWWWWW

me gusto esta clase. gracias

ngModel es una directiva de Angular que se utiliza para enlazar datos bidireccionalmente entre un elemento de formulario y una propiedad de un componente de Angular. Esto significa que ngModel permite mostrar el valor de una propiedad del componente en un elemento de formulario y actualizar autom谩ticamente la propiedad del componente cuando el usuario modifica el valor del elemento de formulario.

Por ejemplo, supongamos que tienes un componente con una propiedad llamada 鈥渘ombre鈥 y quieres enlazarla con un campo de entrada de texto en un formulario. Puedes utilizar ngModel de la siguiente manera:

<input type="text" [(ngModel)]="nombre">
En este caso, se est谩 utilizando el enlace de datos bidireccional [(ngModel)] para enlazar el valor del campo de entrada de texto con la propiedad 鈥渘ombre鈥 del componente. Cada vez que el usuario introduce o modifica el valor del campo de entrada, se actualizar谩 autom谩ticamente la propiedad 鈥渘ombre鈥 del componente y, al mismo tiempo, se mostrar谩 el nuevo valor del campo de entrada en la interfaz de usuario.

ngModel es una de las directivas m谩s 煤tiles de Angular y se utiliza ampliamente en aplicaciones web para enlazar datos entre formularios y componentes. Es importante tener en cuenta que ngModel requiere la importaci贸n del m贸dulo 鈥淔ormsModule鈥 en el m贸dulo principal de la aplicaci贸n para funcionar correctamente.

si que tengo que ver el funcionamiento de Angular Forms, me va a servir de mucho, por ahora, aca esta mi evidencia de las pruebas

Nico, gracias, va muy bien el curso