Résumé des Formulaires Angular

Formulaires pilotés par le template

Les formulaires pilotés par le template sont simples et intuitifs, surtout pour les débutants. Ils reposent principalement sur le template HTML pour définir le formulaire et ses validations.

Étapes :

1. Importer FormsModule dans votre module.
2. Créer le template HTML en utilisant des directives comme ngModel et ngForm.
3. Gérer les soumissions de formulaires et les validations dans le composant.

Exemple :

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name" ngModel required>
  <div *ngIf="myForm.submitted && !myForm.controls.name?.valid">
    Le nom est requis.
  </div>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email" ngModel required email>
  <div *ngIf="myForm.submitted && !myForm.controls.email?.valid">
    Un email valide est requis.
  </div>

  <button type="submit">Soumettre</button>
</form>

Formulaires réactifs

Les formulaires réactifs offrent plus de contrôle et de flexibilité, surtout pour les formulaires complexes. Ils sont basés sur une approche pilotée par le modèle en utilisant des objets dans le composant TypeScript.

Étapes :

1. Importer ReactiveFormsModule dans votre module.
2. Créer le modèle de formulaire dans le composant TypeScript en utilisant FormBuilder, FormGroup, et FormControl.
3. Créer le template HTML en utilisant des directives comme formGroup et formControlName.

Exemple :

// Composant TypeScript
myForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  this.myForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]]
  });
}

onSubmit(): void {
  if (this.myForm.valid) {
    console.log('Données du formulaire : ', this.myForm.value);
  }
}

// Template HTML
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Nom :</label>
  <input type="text" id="name" formControlName="name">
  <div *ngIf="myForm.get('name')?.invalid && myForm.get('name')?.touched">
    Le nom est requis.
  </div>

  <label for="email">Email :</label>
  <input type="email" id="email" formControlName="email">
  <div *ngIf="myForm.get('email')?.invalid && myForm.get('email')?.touched">
    Un email valide est requis.
  </div>

  <button type="submit" [disabled]="myForm.invalid">Soumettre</button>
</form>

Comparaison