Connecter votre formulaire au template

Vous devez maintenant connecter votre formulaire au template à l'aide de la directive [formField]. Elle crée un two-way binding des données entre votre model de formulaire et les éléments de saisie.

Dans cette leçon, vous allez apprendre à :

• Importer la directive FormField
• Utiliser la directive [formField] pour lier les champs du formulaire aux éléments de saisie
• Connecter des champs texte et des cases à cocher à votre formulaire
• Afficher les valeurs des champs du formulaire dans le template

Branchons le template !

1. Importer la directive FormField

   Importez la directive FormField depuis @angular/forms/signals et ajoutez-la au tableau imports de votre composant :

   import { form, FormField } from '@angular/forms/signals';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.html',
     styleUrl: './app.css',
     imports: [FormField],
   })

2. Lier le champ email

   Dans votre template, ajoutez la directive [formField] à l'input email :

   <input type="email" [formField]="loginForm.email" />

   L'expression loginForm.email accède au champ email de votre formulaire.

3. Lier le champ password

   Ajoutez la directive [formField] à l'input password :

   <input type="password" [formField]="loginForm.password" />

4. Lier la case à cocher

   Ajoutez la directive [formField] à l'input de type checkbox :

   <input type="checkbox" [formField]="loginForm.rememberMe" />

5. Afficher les valeurs du formulaire

   Sous le formulaire se trouve une section de débogage qui affiche les valeurs actuelles du formulaire. Affichez la valeur de chaque champ avec .value() :

   <p>Email: {{ loginForm.email().value() }}</p>
   <p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
   <p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>

   Les valeurs des champs du formulaire sont des signals : les valeurs affichées se mettent donc à jour automatiquement pendant la saisie.

Beau travail ! Vous avez connecté votre formulaire au template et affiché les valeurs du formulaire. La directive [formField] gère automatiquement le two-way binding des données : pendant la saisie, le signal loginModel se met à jour et les valeurs affichées changent immédiatement.

Ensuite, vous allez apprendre à ajouter de la validation à votre formulaire !