La majorité des applications web doivent faire appel aux formulaires afin de permettre à l’utilisateur d’entrer des données. Ces données doivent au minimum être validées côté serveur. Afin d’offrir une meilleure expérience utilisateur, la validation côté client est souvent souhaitée. AngularJS a pensé à nous et nous offre un API bien complet afin de gérer ces formulaires.
Validation d’un formulaire
Une validation rigoureuse peut demander plusieurs lignes de code JavaScript. Heureusement, le FormController permet une gestion simplifiée des formulaires.
Plusieurs directives (ngMaxlength, ngPattern, …) sont aussi disponibles afin de garantir que les données soient récupérées dans le format attendu.
https://docs.angularjs.org/guide/forms
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ng-controller="ExampleController"> <form novalidate class="simple-form"> Nom: <input type="text" ng-model="user.name" ng-required="true"/><br /> Courriel: <input type="email" ng-model="user.email" /><br /> Genre: <input type="radio" ng-model="user.gender" value="male" />Homme <input type="radio" ng-model="user.gender" value="female" />Femme <br /> <input type="button" ng-click="reset()" value="Reset" /> <input type="submit" ng-click="update(user)" value="Save" /> </form> </div> |
État du formulaire avec le FormController
C’est le form.FormController qui est responsable de vérifier l’état de tous les contrôles d’un formulaire.
Il permet de définir si un formulaire est valide ou invalide, sale (dirty) ou propre (pristine).
https://docs.angularjs.org/api/ng/directive/ngForm
Propriétés du form
-
$pristineboolean True si l’utilisateur n’a pas interagi avec le formulaire. -
$dirtyboolean True si l’utilisateur a interagi avec le formulaire. -
$validboolean True si tous les éléments du formulaire sont valides. -
$invalidboolean True si au minimum un élément du formulaire est invalide. -
$pendingboolean True si au minimum un élément du formulaire n’a pas été complété. -
$submittedboolean True si l’utilisateur a soumis le formulaire même s’il est invalide. -
$error.Object L’objet $error contient une référence à un contrôle ou un formulaire qui a échoué la validation. - clé : jeton de validation (le nom de l’erreur),
- valeur : tableau des contrôles ou formulaires qui contiennent des règles de validation en échec pour une erreur donnée.
- Les jetons de validation disponibles :
emailmaxmaxlengthminminlengthnumberpatternrequiredurldatedatetimelocaltimeweekmonth
Accès aux propriétés du formulaire
- À partir du formulaire :
nomDuFormulaire.Propriété - À partir d’un champ input :
nomDuFormulaire.nomDuChampInput.Propriété
Les propriétés sont aussi disponibles en tant que directives
ng-validng-invalidng-pendingng-pristineng-dirtyng-submitted
Règle de validation d’un champ de formulaire
<input>
https://docs.angularjs.org/api/ng/directive/input
Pour chaque champ (input), il est possible de définir une ou plusieurs règles de validation.
Exemple de champ input
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<input ng-model="{ string }" name="{ string }" required ng-required="{ boolean }" ng-minlength="{ number }" ng-maxlength="{ number }" ng-pattern="{ string }" ng-change="{ string }"> </input> |
Arguments
| Param | Type | Détails |
|---|---|---|
| ngModel | string | Permet de définir l’expression qui permet l’association (binding) |
| name
(optionnel)
|
string | La propriété name du formulaire ou du champ. |
| required
(optionnel)
|
string | Assigne la clé de validation required si aucun valeur n’a été entrée. |
| ngRequired
(optionnel)
|
boolean | Ajoute l’attribut required si la valeur est à vrai. |
| ngMinlength
(optionnel)
|
number | Assigne la clé de validation minlength si la valeur est plus petite que minlength. |
| ngMaxlength
(optionnel)
|
number | Assigne la clé de validation maxlength si la valeur est plus grande que maxlength. |
| ngPattern
(optionnel)
|
string | Assigne la clé de validation pattern i le ngModel $viewValue ne valide pas l’expression régulière RegExp. |
| ngChange
(optionnel)
|
string | Expression Angular à exécuter lorsqu’un changement est dû à l’interaction de l’utilisateur avec le contrôle. |
| ngTrim
(optionnel)
|
boolean | Si défini à false Angular n’éliminera pas les caractères d’espacement (espace, tab) au début ou à la fin de la chaîne. Ce paramètre est ignoré pour les champs de type input[type=password]. |
Exemples
Désactiver le bouton « soumettre » si le formulaire est invalide avec ng-disabled
|
1 |
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Soumettre</button> |
Afficher un message d’erreur avec ng-show
|
1 2 3 |
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block"> Veuillez indiquer votre nom </p> |
Ajout d’une classe à un champ de formulaire avec ng-class
|
1 2 3 4 5 6 7 8 9 |
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"> <label>Nom</label> <input type="text" name="name" class="form-control" ng-model="user.name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Votre nom est requis.</p> </div> |
Source de la documentation : https://docs.angularjs.org
Facebook Comments