# La boite à outils des "Reactive Forms"
## `FormControl`
La classe **`FormControl`** **est une indirection permettant de contrôler et d'accéder à l'état** des "controls" de la vue *(e.g. ``)*.
{% tabs %}
{% tab title="book-form.component.ts" %}
```typescript
export class BookFormComponent {
bookTitleControl = new FormControl();
bookDescriptionControl = new FormControl();
submitBook() {
console.log(this.bookTitleControl.value);
console.log(this.bookDescriptionControl.value);
}
}
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="book-form.component.html" %}
```markup
```
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
On obtient l'erreur suivante :
`Can't bind to 'formControl' since it isn't a known property of 'input'.`
... car l'`Input` `formControl` est ajouté via la "directive" `FormControlDirective` *(*[*https://github.com/angular/angular/blob/master/packages/forms/src/directives/reactive\_directives/form\_group\_directive.ts*](https://github.com/angular/angular/blob/master/packages/forms/src/directives/reactive_directives/form_group_directive.ts)*)* mais cette "directive" n'est pas importée nativement.
Pour profiter de la directive `FormGroupDirective`, **il faut importer le module `ReactiveFormsModule`** dans les modules contenant des composants qui en dépendent.
```typescript
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
...
imports: [
ReactiveFormsModule
]
})
export class BookModule {
}
```
**Vous pouvez retirer l'import du module `FormsModule`.**
{% endhint %}
`FormControl` fournit différentes propriétés et méthodes permettant de piloter le "control" :
* **`value`** : permet d'accéder à la valeur actuellement contenu dans le "control".
* **`valueChanges`** : est un `Observable` permettant d'**observer les changements** de valeur du "control".
* **`reset`**, **`setValue`** et **`patchValue`** permettent de modifier l'état et la valeur du "control".
{% hint style="danger" %}
La propriété `value` est une source dynamique de données et elle est donc de type `any`.
Méfiez-vous en lors de son utilisation car elle est donc compatible avec tous les types et vous ne serez donc pas "protégé" par la compilation TypeScript.
{% endhint %}
## `FormGroup`
`FormGroup` permet de **regrouper des "controls"** afin de faciliter l'implémentation, récupérer la valeur groupée des "controls" ou encore appliquer des validateurs au groupe.
Le `FormGroup` est construit avec un "plain object" associant chaque **propriété** à un **`FormControl`** .\
Il est alors possible d'accéder aux valeurs et aux "controls" via la propriété associée.
{% tabs %}
{% tab title="book-form.component.ts" %}
```typescript
export class BookFormComponent {
bookForm = new FormGroup({
title: new FormControl(),
description: new FormControl()
});
submitBook() {
console.log(this.bookForm.value);
}
}
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="book-form.component.html" %}
```markup
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
L'objet `this.bookForm.value` présente l'ensemble des valeurs des controls via un "plain objet" :\
`{title: 'TITLE', description: null}`
{% endhint %}
{% hint style="success" %}
Pour éviter d'accéder aux controls via la propriété `FormGroup.controls`, les "Reactive Forms" implémentent également une directive `FormGroupDirective` qui permet d'**associer un `FormGroup` à un élément du DOM** ***(`form` en général mais on peut utiliser d'autres éléments)***. Cela permet alors d'associer les "controls" via leur nom à l'aide de l'`Input` `formControlName`.
```markup
```
{% endhint %}
La classe **`FormGroup`** propose de nombreuses **propriétés et méthodes similaires** à celles rencontrées précédemment avec **`FormControl`**. En effet, **`FormControl` et `FormGroup` héritent de la classe abstraite `AbstractControl`**.
Un `FormGroup` est donc également un "control" et il est donc possible de construire une **arborescence de `FormGroup`**s afin de **regrouper différentes parties d'un formulaire de taille importante** ou dont des parties sont **réutilisables dans d'autres contextes**.
```typescript
new FormGroup({
address: new FormGroup({
street: new FormControl()
})
});
```
## `FormArray`
`FormArray` héritant également de la classe abstraite `AbstractControl`, **permet de créer un "control" contenant une liste de "controls"** *(e.g. `FormControl` ou `FormGroup`)* **ordonnés** *(contrairement à `FormGroup` qui permet de créer un groupe de "controls" accessibles avec des clés sur un "plain object").*
La valeur contenu dans le `FormArray` est de type `Array`.
## `FormBuilder`
Le module `ReactiveFormsModule` implémente également un service `FormBuilder` qui permet d'ajouter un peu de "syntactic sugar" afin de **simplifier la création des `FormGroup`, `FormArray` ou `FormControl`**.
```typescript
bookForm: FormGroup;
constructor(private _formBuilder: FormBuilder) {
this.bookForm = this._formBuilder.group({
title: null,
description: null
});
}
```
�
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://guide-angular.wishtack.io/angular/formulaires/reactive-forms/la-boite-a-outils-des-reactive-forms.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.