Lab 01 : Reactive Forms

📖 Ressources

• Documentation Reactive Forms
• Angular Material Forms
• Référence Modèle Album
• Validation de Formulaires

🚀 Code de Départ

step-1-album-wholesale-v16-pre-add-album

Dans ce lab, vous allez créer un formulaire réactif pour ajouter des albums en utilisant FormGroup et FormControl. Vous allez lier le formulaire à un template avec des composants Angular Material et afficher les erreurs de validation.

📝 Instructions

Étape 1 : Créer un FormGroup

Créez un FormGroup avec des FormControls :

import { FormGroup, FormControl, Validators } from '@angular/forms';

albumForm = new FormGroup({
  name: new FormControl('', Validators.required),
  artist: new FormControl('', Validators.required),
  price: new FormControl(0, [Validators.required, Validators.min(0)])
});

Étape 2 : Lier le Formulaire au Template

Utilisez [formGroup] et formControlName :

<form [formGroup]="albumForm" (ngSubmit)="saveAlbum()">
  <input matInput formControlName="name">
  <input matInput formControlName="artist">
  <input matInput formControlName="price" type="number">

  <button type="submit" [disabled]="!albumForm.valid">
    Add Album
  </button>
</form>

Étape 3 : Afficher les Erreurs de Validation

Affichez les erreurs de manière conditionnelle :

<mat-error *ngIf="albumForm.get('name')?.hasError('required')">
  Name is required
</mat-error>