Liaison bidirectionnelle avec ngModel
Synchronisez les entrées de formulaire avec l’état du composant.
Liaison bidirectionnelle avec ngModel est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Qu’est-ce que la liaison bidirectionnelle ?
La liaison bidirectionnelle maintient une valeur synchronisée entre le composant et la vue : mettre à jour l’un met à jour l’autre. Sa syntaxe est la banane dans une boîte [()].
La banane dans une boîte
La syntaxe combinée [(...)] est une abréviation pour une liaison de propriété associée à une liaison d’événement. Les crochets représentent la boîte et les parenthèses la banane.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">Découvrir ngModel
ngModel est une directive permettant la liaison bidirectionnelle sur les contrôles de formulaire tels que les champs de saisie, les listes déroulantes et les zones de texte.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>Importer FormsModule
Pour utiliser ngModel, vous devez importer FormsModule dans votre composant autonome ou votre NgModule.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Lier un champ de texte
À mesure que l’utilisateur saisit du texte, la propriété liée est mise à jour immédiatement ; modifier la propriété dans le code met également à jour le champ de saisie.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Lier une case à cocher
ngModel fonctionne avec les cases à cocher en les liant à une valeur booléenne.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Lier une liste déroulante
Avec un élément de sélection, ngModel se lie à la valeur de l’option choisie.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel dans les formulaires
Dans un formulaire piloté par le modèle, ajoutez un attribut name afin qu’Angular enregistre le contrôle dans le formulaire.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>ngModel autonome
En dehors d’un formulaire, ngModel fonctionne seul tant que FormsModule est importé ; aucun name n’est requis.
<input [(ngModel)]="search">Quand utiliser ngModel
ngModel est particulièrement adapté aux formulaires simples pilotés par le modèle. Pour une validation complexe et des formulaires dynamiques, les formulaires réactifs sont souvent préférables.
Réagir aux changements
Si vous devez seulement réagir aux changements, liez directement l’événement (ngModelChange) plutôt que d’utiliser une liaison bidirectionnelle complète.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Vérification rapide
Testez votre compréhension de la liaison bidirectionnelle avec ngModel.
Récapitulatif
La liaison bidirectionnelle utilise la syntaxe banane dans une boîte [(ngModel)], qui combine une liaison de propriété et une liaison d’événement. Importez FormsModule pour l’utiliser sur des champs de saisie, des cases à cocher et des listes déroulantes.
Questions Fréquemment Posées
La leçon « Liaison bidirectionnelle avec ngModel » est-elle gratuite ?
Oui — le texte complet de « Liaison bidirectionnelle avec ngModel » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Liaison bidirectionnelle avec ngModel » ?
Synchronisez les entrées de formulaire avec l’état du composant. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Liaison bidirectionnelle avec ngModel » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Récapitulatif des liaisons de propriétés et d’événements
- Liaison bidirectionnelle avec ngModel
- Entrées de signaux model()
- Propriétés personnalisées compatibles avec la liaison bidirectionnelle