Formulaires pilotés par le modèle

Cette leçon vous présente les formulaires pilotés par le modèle dans Angular, qui permettent de créer rapidement des formulaires simples.

Que sont les formulaires pilotés par le modèle ?

Les formulaires pilotés par le modèle utilisent des modèles HTML et des directives Angular pour gérer facilement la création, la validation et l’envoi des formulaires.

Importer FormsModule

Pour utiliser les formulaires pilotés par le modèle, importez FormsModule dans votre module Angular :

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

Créer un formulaire simple

Définissez un formulaire simple dans votre modèle à l’aide de la directive ngForm :

<form #form="ngForm">
  <input name="username" ngModel>
</form>

Liaison bidirectionnelle avec ngModel

ngModel lie les contrôles du formulaire aux propriétés du composant grâce à une liaison de données bidirectionnelle :

<input [(ngModel)]="user.name" name="username">

Envoyer un formulaire

Gérez facilement l’envoi d’un formulaire à l’aide de la liaison d’événements d’Angular :

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Validation des formulaires

Angular fournit des directives de validation simples, comme required et minlength :

<input name="username" ngModel required minlength="4">

Accéder à l’état du formulaire

Accédez à l’état du formulaire, par exemple à sa validité ou à l’état indiquant qu’il a été touché, grâce aux variables du modèle :

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Résumé

Vous avez appris à créer, lier, valider et envoyer facilement des formulaires pilotés par le modèle. Continuez à vous exercer !