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

Valeur du formulaire : {{ f.value | json }}

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.