44. TDF : Accès à l'état du formulaire et soumission
La directive NgForm, instanciée automatiquement sur la balise <form>, agrège les états de tous les contrôles qu'elle contient.
Accéder à l'état global du formulaire
En assignant une variable de référence au formulaire lui-même (ex : #f="ngForm"), nous pouvons accéder à son état global.
html
<form #f="ngForm" (ngSubmit)="onSubmit(f)"> ... <!-- Désactiver le bouton si n'importe quel contrôle est invalide --> <button type="submit" [disabled]="f.invalid">Enregistrer</button> <!-- Afficher toute la valeur du formulaire pour le débogage --> <pre>Valeur du formulaire : {{ f.value | json }}</pre> <!-- Afficher le statut de validation --> <p>Le formulaire est valide : {{ f.valid }}</p> </form>L'événement ngSubmit
L'événement standard DOM submit provoque un rechargement complet de la page. Angular empêche ce comportement par défaut lorsque vous utilisez (ngSubmit) sur l'élément <form>.
Gérer la soumission
En TDF, la meilleure pratique consiste à passer l'objet NgForm entier à la méthode du composant.
typescript import { NgForm } from '@angular/forms';
export class SubmissionComponent { userModel = { firstName: 'John', lastName: 'Doe' };
onSubmit(form: NgForm) { if (form.valid) { console.log('Données à envoyer :', form.value); // Utiliser form.value
// Après une soumission réussie, vous pouvez réinitialiser le formulaire
form.resetForm();
// Si vous voulez garder le modèle mais réinitialiser l'état :
// form.resetForm(this.userModel);
}
} }
form.value contient l'objet clé-valeur agrégé de toutes les entrées ayant un [(ngModel)]. form.resetForm() réinitialise les états pristine, touched et de validation.