Introduction aux formulaires dans Angular: Formes axées sur les modèles

Les formulaires

sont essentiels dans les applications frontales modernes, gérant quotidiennement les interactions des utilisateurs, des connexions et des recherches aux réservations et listes de tâches. Bien que certaines formes soient simples, d'autres peuvent être complexes, couvrant plusieurs pages. Ce tutoriel explore l'approche des formulaires axée sur les modèles d'Angular pour les construire. Quelle que soit la méthode choisie, une bibliothèque de formulaires robuste doit fournir:

• liaison des données bidirectionnelle: maintient les valeurs d'entrée synchronisées avec l'état du composant.
• Suivi de l'état du formulaire: indique visuellement la validité du formulaire (par exemple, en utilisant les bordures rouges pour les erreurs).
• Gestion des erreurs: Affiche clairement les erreurs de validation.
• Activation / désactivation conditionnelle: contrôle des sections de formulaire basées sur la validation.

Stratégies de forme d'Angular

Angular propose deux stratégies puissantes de création de formulaires: des formulaires axés sur les modèles et des formes axées sur le modèle (réactives). Les deux utilisent le FormsModule.

Construire un formulaire d'inscription: un guide étape par étape

Cet exemple démontre un formulaire d'inscription simple à l'aide de formulaires pilotés par modèle.

1. Modèle utilisateur: Définir une classe (ou interface) User pour représenter les données de formulaire:

   export class User {
       constructor(
           public id: number,
           public email: string,
           public pwd: string,
           public confirmPwd: string,
           public gender: string,
           public terms: boolean
       ) { }
   }

2. Configuration des composants: Créez les composants et la disposition nécessaires pour le formulaire d'inscription.

3. Liaison bidirectionnelle avec ngModel: Utilisez ngModel pour la liaison de données bidirectionnelle entre les entrées de formulaire et l'objet User dans votre composant.

4. Soumission de formulaire: Gérer la soumission du formulaire à l'aide de l'événement (ngSubmit).

5. Logique des composants: Dans le fichier TypeScript de votre composant, gérez la soumission du formulaire:

   onSubmit({ value, valid }: NgForm) {
       console.log(this.user.email);
       console.log("valid: " + valid);
   }

6. Exemple complet: Un exemple complet et exécutable est disponible sur github (lien omis pour la concision). Cet exemple comprend le style à l'aide de bootstrap.

Conclusion

Ce tutoriel couvre les formulaires axés sur le modèle en angulaire. Bien que simple et facile à utiliser pour des formes plus petites, cette approche peut devenir moins gérable pour les formes complexes. Le prochain tutoriel explorera les formulaires axés sur le modèle comme une alternative plus évolutive.

Ce message intègre les contributions d'Esther Vaati, développeur de logiciels et écrivain pour Envato TUTS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!