Activer les template-driven forms

Pour commencer à utiliser les template driven form il vous suffit d’importer le module FormsModule dans votre fichier app.module.ts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
 imports: [
   BrowserModule,
   FormsModule, // <----
 ],
 declarations: [
   AppComponent,
 ],
 providers: [],
 bootstrap: [ AppComponent, ]
})
export class AppModule { }

Récupérer la valeur du formulaire dans le component

NgModel

La directive ngModel sert à lier la valeur des contrôles HTML (input, select, textarea) à des attributs de composant.

Le ngModel n’est utile que dans le cas d’un template-driven form.

Pour commencer, vous devez créer un input dans votre template (partie html). Ensuite, vous devez appliquer la directive ngModel sur cet input, en lui donnant comme valeur un attribut existant dans la logique de votre composant.

1
<input type="text" [(ngModel)]="favoriteColor" />

1
favoriteColor: string;

Vous pouvez aussi lier une sous-propriété d’un de vos attributs, s'il s'agit d'un objet :

1
<input type="text" [(ngModel)]="user.favoriteColor">

Two-way binding

La liaison bi-directionnelle utilise une combinaison de la syntaxe de liaison de propriété [] et de la liaison d'événement (). Cette notation combinée est appelée "banana in a box" : [()]

Cela veut dire que la propriété attribuée à la directive [(ngModel)] est mise à jour en temps réel dans le HTML et le TS.

Avec cette notation, vous pouvez modifier la donnée dans les deux sens :

• Modifier le contenu de l'input met à jour l'attribut
• Modifier l'attribut met à jour la valeur de l'input

One-way binding (data flow)

Vous pouvez aussi décider d'utiliser une liaison unidirectionnelle avec ngModel :

• (ngModel) : Un changement dans l'input modifie l'attribut, mais pas l'inverse
• [ngModel] : Un changement de l'attribut modifie l'input, mais pas l'inverse

Validation de formulaire

Via un validateur HTML

Pour ajouter une validation à un template-driven form, vous pouvez appliquer un attribut de validation HTML comme ceci :

1
<input required type="text" [(ngModel)]="favoriteColor">

Ou bien :

1
<input minlength="2" type="text" [(ngModel)]="favoriteColor">

Via une directive

Si aucun validateur HTML ne correspond à votre besoin de validation, vous pouvez créer un validateur personnalisé via une directive.

On ne rentrera pas dans les détails pour ce cas de figure car il serait trop lourd à expliquer dans cet article. Un article dédié à ce sujet sera publié prochainement. Voici un lien vers la doc Angular à ce sujet : Defining custom validators

Template reference variables

À ce stade, tout n'est pas fini ! Il vous reste à accéder à l'état de ces validateurs, pour personnaliser votre interface.

Cela vous sera utile pour afficher des erreurs, griser le bouton de validation etc.

Pour récupérer les informations liées à vos validateurs, il vous faut déclarer une "template reference variable" (une variable locale déclarée dans le template) et y assigner votre directive ngModel, qui vous donnera toutes les informations sur l’état de votre input.

1
<input type="text" [(ngModel)]="user.favoriteColor" #inputColor="ngModel">

Dans cet exemple, on a déclaré une variable inputColor, accessible uniquement dans le template, puis on lui à assigné la directive ngModel de l'input.

inputColor contient donc désormais des informations sur l'état de notre input : Est-il valide ? A-t'il déjà été modifié ? Quelles validations ne sont pas respectées ? etc.

Afficher les erreurs de validation

À un moment donné, il peut être pertinent que notre utilisateur sache pourquoi le formulaire est invalide.

On va se servir de la propriété errors de notre variable inputColor pour savoir quelle erreur est active sur l'input.

1
2
3
4
5
6
7
8
9
10
11
12
13
<input required min-length="2" appForbiddenName [(ngModel)]="userColor" #inputColor="ngModel">

<div *ngIf="inputColor.invalid">
  <p *ngIf="inputColor.errors.required">
    Le champ est obligatoire
  </p>
  <p *ngIf="inputColor.errors.minlength">
    La réponse doit contenir au moins 2 caractères
  </p>
  <p *ngIf="inputColor.errors.forbiddenName">
    Blanc n'est pas considéré comme une couleur
  </p>
</div>

Grâce à la variable locale #inputColor que nous avons défini auparavant, vous pouvez accéder aux erreurs qu’Angular a généré selon les validateurs utilisés.

Si le champ est vide et que l'input est required, alors la propriété required sera présente dans inputColor.errors et la div d'erreur correspondante s'affichera.

Gérer les erreurs avec du CSS

Afin de vous faciliter la gestion d'erreur dans les formulaires, Angular génère des classes CSS sur vos inputs, ce qui vous permet de connaitre leur état.

Sachant cela, vous pouvez prévoir un retour visuel en cas de champ invalide dans votre formulaire.

1
2
3
input.ng-invalid.ng-dirty.ng-touched {
    background-color: red;
}

Avec ce CSS, un input modifié par l'utilisateur et invalide apparaitra en rouge quand l'utilisateur quittera le champ avec son curseur.

Soumission du formulaire

Pour terminer, l’utilisateur doit pouvoir soumettre le formulaire après l’avoir rempli.

Pour gérer la soumission du formulaire, vous devez capter l'évènement (ngSubmit) émis par le formulaire lorsque le bouton submit du formulaire est cliqué. Si vous n'êtes pas dans une balise <form>, vous pouvez capter l'évènement (click) sur le bouton de soumission.

1
2
3
4
5
<form (ngSubmit)="onSubmit()" #userForm="ngForm">
    <label for="color"></label>
    <input id="color" name="color" type="text" [(ngModel)]="user.favoriteColor" #inputColor="ngModel">
    <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Remarquez que nous avons défini la template reference variable #userForm pour accéder à l'état global du formulaire. Cela nous donne l’occasion de griser le bouton de validation tant que le formulaire est invalide.

Il ne vous reste plus qu'à créer le handler onSubmit() dans votre composant pour gérer la soumission de votre formulaire.

Conclusion

Dans cet article vous avez découvert comment créer des template-driven forms avec Angular. NgModel, two-way binding, validation, gestion d'erreurs et soumission de formulaire vous sont désormais accessibles !

J’espère que cet article vous sera utile. N'hésitez pas à nous laisser un commentaire si vous voyez des choses à ajouter !