Créez rapidement des formes angulaires simples mais puissantes

Angular simplifie la création et la validation de la forme avec deux approches: des formes motivées et réactives du modèle. Les formulaires axés sur les modèles sont idéaux pour les formes simples et simples, tandis que les formulaires réactifs offrent un plus grand contrôle pour des scénarios complexes. Cet article démontre les deux méthodes avec un exemple pratique.

Concepts clés:

• Stratégies de forme d'Angular: Tirer les formes axées sur les modèles pour la facilité et la vitesse, et les formes réactives pour des formes complexes et hautement contrôlées.
• Intégration bootstrap: rationaliser le style avec bootstrap, améliorer l'attrait visuel sans personnalisation étendue.
• Validation intégrée: Utilisez les validateurs d'Angular (par exemple, required, minlength) directement dans les modèles (axés sur le modèle) ou dans FormControl instanciation (formulaires réactifs).
• Gestion de la soumission de formulaire: lier l'événement ngSubmit à une méthode de composante pour la capture et le traitement efficaces des données.
• Gestion de formulaire dynamique: Utilisez les fonctionnalités de contrôle de formulaire d'Angular pour les ajustements dynamiques d'entrée et de validation, créant des expériences utilisateur réactives.

Prérequis:

Une compréhension de base de l'Angular est utile. Bien qu'il ne soit pas strictement requis, la familiarité avec JavaScript et le cadre angulaire améliorera votre compréhension. Pour une plongée plus profonde dans Angular, considérez des ressources comme la série d'articles SitePoint sur la création d'une application crud avec Angular.

Configuration:

Ce tutoriel utilise un bootstrap pour le style. Voici comment l'intégrer:

1. Installez Bootstrap: Dans le répertoire de votre projet, exécutez npm install bootstrap@next.

2. Configurer Angular CLI: Dans votre fichier angular.json, ajoutez un lien de feuille de style à bootstrap:

   "styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ]

3. Importer FormsModule: Dans votre app.module.ts, Importer FormsModule depuis @angular/forms:

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       BrowserModule,
       FormsModule,
       // ... other imports
     ]
   })

Formes motivées par des modèles:

Pour un formulaire d'enregistrement rapide de l'entreprise, commencez par une balise de formulaire de base:

<form #companyForm="ngForm" (ngSubmit)="submitCompany(companyForm.value)">
  <!-- Form fields here -->
  <button class="btn btn-primary" type="submit" [disabled]="!companyForm.valid">Submit</button>
</form>

Remarquez l'utilisation de ngForm pour créer une variable de référence de modèle et ngSubmit pour lier la soumission de formulaire à une méthode de composant. L'attribut [disabled] garantit que le bouton est inactif jusqu'à ce que le formulaire soit valide.

Création d'entrées de formulaire et de validation:

pour un champ de saisie du nom de l'entreprise:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css"
]

Cela présente ngModel pour la liaison des données bidirectionnelle, required et minlength validateurs et affichage d'erreur conditionnelle basé sur companyName.touched et companyName.errors.

Une approche similaire s'applique à d'autres domaines de forme, comme une liste déroulante pour l'industrie. Le dactylographie du composant définirait les options de l'industrie.

Méthode submitCompany du composant:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    // ... other imports
  ]
})

Formes réactives:

Pour un formulaire d'enregistrement de compte plus complexe, les formulaires réactifs fournissent un plus grand contrôle.

Importer ReactiveFormsModule: Dans votre app.module.ts, Importer ReactiveFormsModule de @angular/forms.

Créer des contrôles de formulaire dans le composant:

<form #companyForm="ngForm" (ngSubmit)="submitCompany(companyForm.value)">
  <!-- Form fields here -->
  <button class="btn btn-primary" type="submit" [disabled]="!companyForm.valid">Submit</button>
</form>

Formulaire dans le modèle:

<input type="text" class="form-control" name="companyName" ngModel #companyName="ngModel" required minlength="3">
<div *ngIf="companyName.touched && companyName.errors">
  <div class="alert alert-danger" *ngIf="companyName.errors.required">Company name is required</div>
  <div class="alert alert-danger" *ngIf="companyName.errors.minlength">Company name must be at least {{ companyName.errors.minlength.requiredLength }} characters long</div>
</div>

Formez des champs d'entrée:

submitCompany(formData) {
  console.log(formData); // Process form data
  alert('Form submitted!');
  // Reset the form (optional)
}

La gestion des erreurs est similaire aux formulaires axés sur les modèles, mais en utilisant accountForm.get('email').errors etc. La validation asynchrone peut être ajoutée à l'aide de validateurs et de services personnalisés.

N'oubliez pas d'ajuster les extraits de code pour correspondre à vos champs et exigences de formulaire spécifiques. Cette explication détaillée fournit une base solide pour construire des formes simples et complexes en angulaire.

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!