📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Utiliser FormControl et FormGroup ​

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

ts
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 :

typescript
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 :

typescript
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() :

ts
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.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !