Les formulaires avec AngularJS

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

 

 

É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

  • $pristine

    boolean True si l’utilisateur n’a pas interagi avec le formulaire.
  • $dirty

    boolean True si l’utilisateur a interagi avec le formulaire.
  • $valid

    boolean True si tous les éléments du formulaire sont valides.
  • $invalid

    boolean True si au minimum un élément du formulaire est invalide.
  • $pending

    boolean True si au minimum un élément du formulaire n’a pas été complété.
  • $submitted

    boolean 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 :
      • email
      • max
      • maxlength
      • min
      • minlength
      • number
      • pattern
      • required
      • url
      • date
      • datetimelocal
      • time
      • week
      • month

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-valid
  • ng-invalid
  • ng-pending
  • ng-pristine
  • ng-dirty
  • ng-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

 

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

Afficher un message d’erreur avec ng-show

Ajout d’une classe à un champ de formulaire avec ng-class

Source de la documentation : https://docs.angularjs.org

Comments

comments