Utiliser FormControl et FormGroup

Voici un exemple de code pour un formulaire de connexion simple :

import { Component } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <label>
        Email:
        <input type="email" formControlName="email">
      </label>
      <br>
      <label>
        Mot de passe:
        <input type="password" formControlName="password">
      </label>
      <br>
      <button type="submit">Se connecter</button>
    </form>
  `
})
export class LoginFormComponent {
  form: FormGroup = new FormGroup({
    email: new FormControl(''),
    password: new FormControl('')
  });

  onSubmit() {
    // La soumission du formulaire est gérée ici
  }
}

Le premier paramètre de FormControl est la valeur initiale du contrôle. C'est la valeur qui sera affichée dans le champ de formulaire lorsque le composant est chargé pour la première fois. Si vous ne souhaitez pas fournir de valeur initiale, vous pouvez simplement passer une chaîne vide ou null comme premier paramètre.

Récupération des valeurs du formulaire

Pour récupérer les valeurs lorsque le formulaire est soumis, vous pouvez simplement accéder à la propriété value de form.

Dans la méthode onSubmit :

onSubmit() {
  const formData = this.form.value;
  console.log(formData); // { email: "valeur saisie", password: "valeur saisie" }
}

Les formulaires typés depuis Angular 14+

Avec Angular v14, vous pouvez typer votre formulaire pour éviter des erreurs inattendues et rendre votre code plus lisible.

En utilisant l'exemple précédent, vous pourriez typer le formulaire comme ceci :

form: FormGroup<{
    email: FormControl<string | null>;
    password: FormControl<string | null>;
}> = new FormGroup({
    email: new FormControl<string | null>(''),
    password: new FormControl<string | null>('')
});

Utiliser setValue()

Pour définir la valeur d'un contrôle FormControl de manière asynchrone, vous pouvez utiliser la méthode setValue(). Cette méthode prend en paramètre la valeur souhaitée et met à jour le contrôle avec cette valeur.

Voici un exemple d'utilisation de setValue() :

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <input [formControl]="control">
  `
})
export class MyComponent {
  control: FormControl = new FormControl('');

  constructor() {
    setTimeout(() => {
      this.control.setValue('Nouvelle valeur');
    }, 2000);
  }
}

Dans cet exemple, le contrôle FormControl est lié à un champ de formulaire via la directive formControl. La valeur initiale du contrôle est définie sur une chaîne vide. Après 2 secondes, la valeur du contrôle est mise à jour avec setValue() et le champ de formulaire est mis à jour en conséquence.