42. Configuration des Template-Driven Forms (TDF)

Les Template-Driven Forms reposent fortement sur des directives placées directement dans le template HTML pour déduire le modèle du formulaire. Cette approche est rapide et facile pour les formulaires simples.

Directives clés en TDF

1. NgForm : Appliquée automatiquement à la balise <form>. Elle gère toute la structure et l'état du formulaire.
2. ngModel : Crée automatiquement une instance de FormControl pour l'élément d'entrée et le lie à une propriété du composant via une liaison bidirectionnelle [(ngModel)].

Création d'un TDF étape par étape

1. S'assurer que le FormsModule est importé.

2. Définir le formulaire dans le template

Nous utilisons une variable de référence de template (#f) pour accéder à l'instance de la directive NgForm, ce qui nous permet d'inspecter l'état du formulaire.

html

<p *ngIf="usernameCtrl.invalid && usernameCtrl.touched" class="error-message">
  Le nom d'utilisateur est requis.
</p>

3. Gérer la soumission dans le composant

typescript import { NgForm } from '@angular/forms';

export class TdfComponent { user = { username: '', email: '' };

onSubmit(form: NgForm) { if (form.valid) { console.log('Formulaire soumis !', this.user); // Envoyer les données de this.user au service } else { console.error('Le formulaire est invalide.'); } } }

En TDF, le composant ne détient que le modèle de données (user), tandis que le template gère les contrôles et l'état de validation.