ng-form

Syntaxe

Paramètres

Description

Cette directive permet d'indiquer le formulaire HTML héritant du contrôle.

Remarques

• Objectif principal : La directive ng-form permet de créer des sous-formulaires dans AngularJS. Contrairement à la balise <form> du HTML, elle peut être utilisée sur n'importe quel élément HTML, ce qui la rend utile pour structurer des formulaires complexes avec des validations segmentées.
• Validation au niveau des sous-formulaires : Chaque ng-form possède son propre contrôleur de formulaire avec des propriétés comme $valid, $invalid, $pristine, et $dirty. Cela permet de gérer et de valider indépendamment différentes sections d'un formulaire, facilitant les scénarios où chaque partie a des règles spécifiques.
• Compatibilité avec les balises HTML : La directive ng-form n'est pas limitée aux balises <form>; elle peut être appliquée à des div ou à tout autre conteneur HTML. Cela est particulièrement utile pour les applications nécessitant des interfaces utilisateur dynamiques ou des formulaires imbriqués.
• Imbrication de formulaires : L'utilisation de ng-form permet d'imbriquer des formulaires dans un seul formulaire global. Chaque sous-formulaire peut avoir son propre ensemble de champs et de validations tout en faisant partie d'une structure de formulaire plus large.
• Usage avec des directives AngularJS : ng-form fonctionne bien avec des directives telles que ng-model et ng-submit. Par exemple, il est possible de gérer la soumission ou la validation d'une seule partie d'un formulaire global en liant des contrôleurs spécifiques à chaque ng-form.
• Amélioration de la maintenabilité : Avec des formulaires complexes, l'utilisation de ng-form permet de mieux organiser et structurer le code en divisant un formulaire en parties logiques. Cela simplifie le débogage et rend le formulaire plus facile à lire et à maintenir.
• Propriété name obligatoire : Pour que ng-form soit pleinement fonctionnel, il est important de lui donner un nom unique via l'attribut name. Ce nom permet d'accéder au sous-formulaire dans l'étendue et de suivre son état (par exemple, myForm.section1.$valid).
• Interaction avec les classes CSS : Comme les formulaires standards dans AngularJS, ng-form ajoute automatiquement des classes CSS basées sur l'état du formulaire (comme ng-valid ou ng-dirty). Cela permet de styliser dynamiquement les sous-formulaires en fonction de leur état de validation ou d'interaction.