43. TDF : Utilisation de NgModel et des contrôles de formulaire
ngModel est la clé pour créer des contrôles de formulaire en TDF. Lorsqu'il est utilisé à l'intérieur d'une balise <form>, il connecte automatiquement l'entrée à la machinerie des formulaires d'Angular.
L'importance de l'attribut name
En TDF, chaque entrée utilisant ngModel doit avoir un attribut name unique. C'est ainsi qu'Angular enregistre le contrôle d'entrée dans le groupe NgForm parent.
html
<input type="text" name="firstName" [(ngModel)]="user.firstName">
États du contrôle de formulaire (#control="ngModel")
En assignant une variable de référence de template à ngModel (ex : #emailCtrl="ngModel"), nous pouvons accéder à l'état du contrôle individuel dans le template. Ces états sont cruciaux pour les retours de validation :
| Propriété d'état | Description |
|---|---|
valid | Vrai si la valeur saisie respecte toutes les règles de validation. |
invalid | Vrai si la valeur saisie échoue à au moins une règle. |
pristine | Vrai si l'utilisateur n'a pas encore modifié la valeur. |
dirty | Vrai si l'utilisateur a modifié la valeur. |
untouched | Vrai si l'utilisateur n'a pas encore quitté l'entrée (focus out). |
touched | Vrai si l'utilisateur a quitté l'entrée. |
Afficher les retours sur l'état du contrôle
html <input type="email" name="email" [(ngModel)]="user.email" required email #emailCtrl="ngModel">
L'email est requis.
Le format de l'email est invalide.
<input [ngClass]="{ 'is-invalid': emailCtrl.invalid && emailCtrl.touched }" ... >