La méthode la plus simple pour créer des formulaires en Angular. On laisse le HTML (le "Template") piloter la logique avec la directive magique ngForm. Idéal pour les formulaires simples (Login, Contact).
Soumettez le formulaire pour voir les données envoyées.
#monFormulaire="ngForm", Angular crée un objet JavaScript contenant tout l'état du formulaire (validité, valeurs). ngModel et name="email" sur un input, Angular l'ajoute automatiquement à l'objet monFormulaire.value. #emailCtrl="ngModel") pour vérifier s'il a été touché (emailCtrl.touched) et s'il contient des erreurs (emailCtrl.invalid). import { Component } from '@angular/core';
import { NgForm, FormsModule } from '@angular/forms';
@Component({
selector: 'app-ngForm',
imports: [FormsModule],
template: `
<!-- L'objet ngForm est créé et passé à onSubmit lors de la validation -->
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
<input type="email" name="email" ngModel required #emailCtrl="ngModel" />
<div *ngIf="emailCtrl.invalid && emailCtrl.touched">Email Invalide</div>
<button type="submit" [disabled]="!loginForm.valid">Envoyer</button>
</form>
`
})
export class NgFormComponent {
onSubmit(form: NgForm) {
// form.value contient un objet magique avec : { email: '...' }
console.log(form.value);
form.reset();
}
}