Comment faire un formulaire avec ReactiveFormsModule sur Angular ?

Pour utiliser ReactiveFormsModule dans votre projet Angular, vous devez d'abord l'importer dans votre module principal :

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // Other imports
    ReactiveFormsModule
  ],
  // Other properties
})
export class AppModule { }

Utiliser FormControl et FormGroup

Ensuite, vous pouvez utiliser ReactiveFormsModule dans votre composant en suivant ces étapes :

1. Importez FormGroup et FormControl de @angular/forms dans votre composant.
2. Créez un objet FormGroup en utilisant la méthode FormGroup.create().
3. Ajoutez des contrôles au formulaire en utilisant la méthode FormGroup.addControl().
4. Assignez l'objet FormGroup à la propriété form de votre composant.
5. Utilisez la directive formGroup pour lier votre formulaire à l'objet FormGroup dans votre template HTML.
6. Utilisez la directive formControlName pour lier chaque champ de formulaire à un contrôle FormControl dans votre objet FormGroup.

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

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

@Component({
  selector: 'app-login-form',
  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 } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  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.