Mettre en place le model de formulaire

Chaque Signal Form commence par un model de données de formulaire : un signal qui définit la forme de vos données et stocke les données de votre formulaire.

Dans cette leçon, vous allez apprendre à :

• Définir une interface TypeScript pour les données de votre formulaire
• Créer un signal pour contenir les valeurs du formulaire
• Utiliser la fonction form() pour créer un Signal Form

Posons les fondations de notre formulaire de connexion !

1. Définir l'interface LoginData

   Créez une interface TypeScript qui définit la structure des données de votre formulaire de connexion. Le formulaire comportera :

   • Un champ email (string)
   • Un champ password (string)
   • Un champ rememberMe (boolean)

   interface LoginData {
     email: string;
     password: string;
     rememberMe: boolean;
   }

   Ajoutez cette interface au-dessus du décorateur @Component.

2. Importer signal et form

   Importez la fonction signal depuis @angular/core et la fonction form depuis @angular/forms/signals :

   import {Component, signal} from '@angular/core';
   import {form} from '@angular/forms/signals';

3. Créer le signal du model de formulaire

   Dans la classe de votre composant, créez un signal loginModel avec des valeurs initiales. Utilisez l'interface LoginData comme paramètre de type :

   loginModel = signal<LoginData>({
     email: '',
     password: '',
     rememberMe: false,
   });

   Les valeurs initiales sont des chaînes vides pour les champs texte et false pour la case à cocher.

4. Créer le formulaire

   Créez maintenant le formulaire en passant le signal de votre model à la fonction form() :

   loginForm = form(this.loginModel);

   La fonction form() crée un formulaire à partir de votre model et vous donne accès à l'état des champs et à la validation.

Excellent ! Vous avez mis en place votre model de formulaire. Le signal loginModel contient les données de votre formulaire, et loginForm donne accès à chaque champ avec la sûreté du typage.

Ensuite, vous allez apprendre à connecter votre formulaire au template !