Binding bidireccional con ngModel
Sincronice las entradas de formularios con el estado del componente.
Binding bidireccional con ngModel es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué es el enlace bidireccional?
El enlace bidireccional mantiene sincronizado un valor entre el componente y la vista: al actualizar uno, se actualiza el otro. La sintaxis es la banana-in-a-box [()].
La banana in a box
La sintaxis combinada [(...)] es una abreviatura de un enlace de propiedades más un enlace de eventos. Los corchetes son la caja y los paréntesis, la banana.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">Introducción a ngModel
ngModel es una directiva para el enlace bidireccional en controles de formulario como inputs, selects y textareas.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>Importar FormsModule
Para usar ngModel, debe importar FormsModule en su componente independiente o NgModule.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Enlazar un campo de texto
A medida que el usuario escribe, la propiedad enlazada se actualiza inmediatamente, y cambiar la propiedad en el código actualiza el campo de entrada.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Enlazar una casilla de verificación
ngModel funciona con casillas de verificación y se enlaza a un valor booleano.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Enlazar un select
Con un elemento select, ngModel se enlaza al valor de la opción elegida.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel dentro de formularios
Dentro de un formulario controlado por plantilla, añada un atributo name para que Angular registre el control en el formulario.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>ngModel independiente
Fuera de un formulario, ngModel funciona por sí solo siempre que se haya importado FormsModule; no se requiere name.
<input [(ngModel)]="search">Cuándo usar ngModel
ngModel resulta ideal para formularios sencillos controlados por plantilla. Para validaciones complejas y formularios dinámicos, suelen preferirse los formularios reactivos.
Reaccionar a los cambios
Si solo necesita reaccionar a los cambios, enlace directamente el evento (ngModelChange) en lugar de usar un enlace bidireccional completo.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Comprobación rápida
Compruebe su comprensión del enlace bidireccional con ngModel.
Resumen
El enlace bidireccional utiliza la sintaxis banana-in-a-box [(ngModel)], que combina el enlace de propiedades y el de eventos. Importe FormsModule para usarlo en inputs, casillas de verificación y selects.
Preguntas frecuentes
¿La lección «Binding bidireccional con ngModel» es gratis?
Sí — el texto completo de «Binding bidireccional con ngModel» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Binding bidireccional con ngModel»?
Sincronice las entradas de formularios con el estado del componente. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Binding bidireccional con ngModel»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Repaso del binding de propiedades y eventos
- Binding bidireccional con ngModel
- Inputs de señales model()
- Propiedades personalizadas con binding bidireccional