Ajouter la soumission du formulaire

Pour finir, voyons comment gérer la soumission du formulaire. Vous allez apprendre à utiliser la fonction submit() pour exécuter des opérations asynchrones quand le formulaire est valide, et à désactiver le bouton de soumission quand le formulaire contient des erreurs.

Dans cette activité, vous allez apprendre à :

• Importer la fonction submit()
• Créer une méthode de gestion de la soumission
• Utiliser submit() pour n'exécuter la logique que si le formulaire est valide
• Désactiver le bouton de soumission en fonction de l'état du formulaire

Terminons le formulaire !

1. Importer la fonction submit

   Importez la fonction submit depuis @angular/forms/signals :

   import {form, FormField, required, email, submit} from '@angular/forms/signals';

2. Ajouter la méthode onSubmit

   Dans la classe de votre composant, ajoutez une méthode onSubmit() qui gère la soumission du formulaire :

   onSubmit(event: Event) {
     event.preventDefault();
     submit(this.loginForm, async () => {
       const credentials = this.loginModel();
       console.log('Logging in with:', credentials);
       // Add your login logic here
     });
   }

   La fonction submit() n'exécute votre callback asynchrone que si le formulaire est valide. Elle gère aussi automatiquement l'état de soumission du formulaire.

3. Lier le gestionnaire de soumission au formulaire

   Dans votre template, liez la méthode onSubmit() à l'événement submit du formulaire :

   <form (submit)="onSubmit($event)"></form>

4. Désactiver le bouton quand le formulaire est invalide

   Modifiez le bouton de soumission pour qu'il soit désactivé quand le formulaire est invalide :

   <button type="submit" [disabled]="loginForm().invalid()">Log in</button>

   Cela empêche la soumission quand le formulaire contient des erreurs de validation.

Félicitations ! Vous avez créé un formulaire de connexion complet avec les Signal Forms.

Prêt à revoir ce que vous avez appris et à explorer des sujets avancés ? Passez aux prochaines étapes !