Qu'est-ce que l'objet FormBuilder ?

Le FormBuilder est un objet fourni par Angular, qui facilite la création de formulaires réactifs. Plus exactement, le FormBuilder fournit du sucre syntaxique pour créer de nouvelles instances de FormGroup, FormControl et FormArray.

Comment utiliser un FormBuilder ?

Tout d'abord il faudra l'importer dans votre composant :

1
import { FormBuilder } from '@angular/forms'

Ensuite il faut l'injecter dans votre composant, via le constructeur :

1
constructor(private formBuilder: FormBuilder) {}

Vous pouvez ensuite commencer à utiliser les méthodes du FormBuilder.

Les méthodes du FormBuilder

Il n'y a que 3 méthodes fournies par le FormBuilder.

La méthode control()

Plutôt intuitive, la méthode control() permet de créer une instance de FormControl.

1
this.control = formBuilder.control({value: 'my val', disabled: true});

Dans cet exemple, la méthode crée un FormControl disabled et avec une valeur initiale.

Pour rappel, le FormControl permet de contrôler la valeur du champ, le statut de validation du champ, les interactions utilisateurs et les événements liés à ce champ.

La méthode group()

La méthode group() permet de faciliter la création d'une instance de FormGroup, et des instances de FormControl que contient le FormGroup.

Dans le hook OnInit de votre composant, créez le formulaire avec la méthode group() du FormBuilder :

1
2
3
4
5
6
7
this.contactForm = this.formBuilder.group({
    firstname: [''],
    lastname: [''],
    email: ['', Validators.required],
    gender: [''],
    country: [''],
});

Vous remarquez que la méthode group() prend en paramètre un objet de configuration. Dans cet objet, chaque clé fait référence à une instance de FormControl qui sera créée pour vous. Chaque valeur associée à une clé prend la forme d'un tableau, qui contient les configurations du FormControl.

On peut passer en 2ème paramètre un autre objet qui sert à appliquer des configurations à tous les FormControls en même temps.

1
2
3
4
this.contactForm = this.formBuilder.group({
    firstname: [''],
    lastname: [''],
}, { validators: Validators.required, updateOn: 'blur' });

La méthode array()

Cette méthode permet d'instancier un FormArray. Contrairement à la méthode group() où chaque contrôle est représenté par une paire clé-valeur, dans le FormArray les contrôles font partie d'un tableau.

1
this.skills = this.formBuilder.array([]);

On passe généralement un tableau vide en paramètre de la méthode array(), car les controls sont gérés dynamiquement.

Avantages du FormBuilder

Il n'y a qu'un vrai avantage à utiliser le FormBuilder : rendre le code plus clair et plus concis.

Angular fournit cet objet car les reactive forms sont généralement très lourds à instancier en terme de quantité de code. Le FormBuilder enlève le besoin d'écrire du code technique et vous permet de vous focaliser sur la configuration de votre formulaire.

En utilisant le FormBuilder, vous raccourcissez la taille du code, évitez d'écrire du code qui n'apporte pas d'information concrète sur votre formulaire et vous limitez le risque d'erreur lié à la déclaration d'un très gros objet.

De plus, vous pouvez évitez les répétitions grâce aux configurations globales sur les FormGroup et les FormArray.

Voici un exemple. Sans FormBuilder :

1
2
3
4
5
6
7
8
9
10
11
profileForm = new FormGroup({ 
    email: this.emailFormControl, 
    firstName: new FormControl(''), 
    lastName: new FormControl(''), 
    address: new FormGroup({ 
        street: new FormControl('', Validators.required), 
        city: new FormControl('', Validators.required), 
        state: new FormControl('', Validators.required), 
        zip: new FormControl('', Validators.required) 
    })
});     

Avec FormBuilder :

1
2
3
4
5
6
7
8
9
10
11
12
13
constructor(private fb: FormBuilder) { }

profileForm = this.fb.group({ 
    email: this.emailFormControl, 
    firstName: [''], 
    lastName: [''], 
    address: this.fb.group({ 
        street: [''], 
        city: [''], 
        state: [''], 
        zip: [''] 
    }, { validators: Validators.required }),
});

Aucun doute, gros gain de code et de lisibilité !

Conclusion

J'espère vous avoir convaincu d'utiliser le FormBuilder. Vous devriez avoir toutes les infos nécessaires pour commencer à vous en servir.

N'hésitez pas à nous laisser un commentaire si vous voyez des choses à ajouter !