Valider un formulaire de saisie-Avoir un formulaire de saisie–Découvrons Angular

Une fois la mise en place de notre form, nous souhaitons mettre en place la validation des champs, comme tout bon formulaire qui se respecte.

Suivons ensemble les étapes permettant de valider nos champs de saisie, et tout contrôler du côté Component.

Ca vous dit d’obtenir cet effet :

1. Ajouter un ngForm à notre form

Si vous avez bien suivi notre première étape, ça doit déjà être le cas.
Pour contrôler notre form depuis le Component de la Vue, nous allons lui affecter une variable locale, grâce à ngForm :

<form #maForm=”ngForm” />

ngForm est une directive incluse avec le module FormsModule.

2. Ajout des champs de saisie, avec ngModel et la banana

Dans Angular, vous avez deux sens de binding avec le Component :

1. De la Vue vers le Component : []
   Nous les utilisons pour passer des éléments depuis la vue vers le Component.
2. Du Component vers la Vue : ()
   Nous les utilisons pour appeler des méthodes du Component dans la Vue

Il existe une dernière forme de binding : la banana ! A savoir [( )] (oui, selon Angular, ça ressemble à une banane …). Ainsi, nous avons ici du binding bi-directionnel : venant du Component, et allant vers le Component.

Vous allez pouvoir y appeler les attributs du model qui représente votre Vue.

Ce qui donne :

[(ngModel)]=”monItem.maPropriete”

3. Utilisation des propriétés CSS proposées avec ngModel

Avec le module FormsModule et le ngModel, des classes css sont apparues (et sont directement gérées par Angular) (du côté vue HTML générée).

Vous pouvez alors ajouter deux classes pour afficher si c’est OK ou en erreur :

.ng-valid[required], .ng-valid.required {

border-left: 5px solid green;

}

.ng-invalid:not(form) {

border-left: 5px solid red;

}

Ca nous permet d’avoir ce comportement, visuellement bien sympa :

4. Validateurs Angular

Nous pouvons ajouter plusieurs validateurs qui vont permettre de mettre à jour l’état de validité de nos champs, du point de vue Angular.

Nous avons :

• required : nous obligeant à saisir une information
• les regular expression avec pattern,
• la validation d’email : email
• …

5. Affichage d’une information quand c’est invalide

Il est important, comme on le voit dans l’animation un peu plus haut, d’ajouter une information pour informer l’utilisateur du champ invalide.

Cependant, il ne faut pas qu’elle s’affiche tout le temps : juste lors du champ invalide.

Rajouter ici un bloc div, contenant le message à afficher :

<div class= »card-panel red accent-1″ [hidden]= »name.valid || name.pristine »>

Nom du clone requis

</div>

Ici, nous notons l’utilisation de [hidden] qui va gérer, du point de vue Angular, l’état de visibilité du div.

Ce champ attend un booléen :

• Le champ de saisie est-il valide (name.valid) ?
• Le champ de saisie est-il en premier affichage (name.pristine) ?

Attribuer une variable Angular à nos champs

Pour que tout fonctionne ici, il faut ajouter une dernière étape : attribuer un nom de variable à notre champ texte, afin de vérifier s’il est valide.

<input type= »text » required name= »name » [(ngModel)]= »clone.name » id= » » #name= »ngModel »>

Ici, le nom de la variable est name (#name), ça aurait pu être #titi.

NOTE: le ngModel a son importance pour initialiser la variable.

6. Empêcher la validation si le formulaire est invalide

Il nous reste à empêcher de valider notre formulaire (donc l’enregistrement) si le formulaire est invalide.

Ici, deux étapes à respecter :

a) Attribuer un nom de variable au formulaire

Nous allons utiliser le même principe que pour les champs et ne ngModel.

<form (submit)= »onSubmit() » #myForm= »ngForm »>

Nous attribuons donc une variable nommée myForm à notre formulaire.

b) Mettre à jour l’état d’activation du bouton d’enregistrement

Nous pouvons alors vérifier si la form est valide, depuis le bouton :

<input type= »submit » value= »Enregistrer » [disabled]= »! myForm.form.valid »/>