14 - Les formulaires : Reactive Form et FormControl

Les formulaires et leur validation sont des éléments incontournables dans le développement d'application web. Angular nous offre une multitude d'outils dédiés à la création et validation de formulaire. Il existe deux types de formulaire : templates driven forms et reactive forms.

Objectifs

• Créer un "model driven template" ou "reactive form" en manipulant les classes FormGroup, FormControl...
• Ajouter dynamiquement des contrôles à un formulaire.
• Utiliser la classe Validators pour valider les données par le code.
• Créer son propre validateur.
• Traquer les changements de valeur et d'état des contrôles.
• Lier le code au template html avec les directives FormGroup, FormGroupName, FormControlName...

Explications

Tu as précédemment appris à utiliser les template driven forms avec l'utilisation de ngModel. Les champs de ton formulaire étaient liés avec des attributs de ton component et la validation s'effectuait à l'aide de directives. Si tu as un grand formulaire, tu vas également avoir beaucoup de règles de validations que tu positionnes directement dans le template html. Ces règles de validation correspondent à des règles fonctionnelles/métiers qui devraient plutôt se trouver dans le typescript du component.

Pour rappel, le template html sert à afficher et le fichier typescript sert à controler ce que tu veux afficher.

En angular, tu peux gérer les formulaires de 2 manières :

• Template driven form
• Reactive form

Tu trouveras une un tableau comparatif sur la documentation.

Globalement, les reactive forms consistent à gérer un formulaire directement dans le typescript. Tu spécifieras les règles de validation dans typescript au lieu du template html. De plus, les valeurs des champs ne seront mises à jour qu'au moment de la soumission du formulaire. Il n'y aura pas de 2 way binding et ce sera à toi de décider quand mettre à jour ton champ.

Installation

La 1ère chose à faire est d'importer le ReactiveFormsModule dans ton AppModule :

// src/app/app.module.ts

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

@NgModule({
  ...
  imports: [
    ...,
    ReactiveFormsModule
  ],
  ...
})
export class AppModule { }

Mise en place des FormControl

Tu vas maintenant créer un UserComponent qui affichera deux champs d'input pour le username et l'email.

Tu vas d'abord commencer par créer les attributs reactive forms qui te serviront à contrôler ton formulaire. Ces attributs seront du type FormControl. Il nous faut un FormControl pour le username et un autre pour l'email.

// src/app/user/user.component.ts

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  username = new FormControl('');
}

Un FormControl prend en paramètre une valeur par défaut lors de sa création.

Tu vas maintenant créer les champs de formulaire html et les lier avec tes FormControl en utilisant la nouvelle directive [formControl]="nomDeTonAttributFormControl. Pas besoin d'utiliser de balise <form> pour le moment, ce sera l'objet de la quête suivante.

<!-- src/app/user/user.component.html -->

<div>
  <label>
    Username:
      <input type="text" [formControl]="username">
  </label>
</div>

Tu peux maintenant essayer de mettre une valeur par défaut lors de l'instanciation de tes FormControl pour visualiser le résultat sur ton formulaire.

Gérer les valeurs

Tu peux afficher la valeur entrée dans ton FormControl en utilisant une interpolation. Une classe FormControl possède un attribut value :

{{ username.value }}

Tu peux également changer cette valeur dans le typescript à l'aide de la méthode setValue(newValue) de la classe FormControl :

changeUsername() {
  this.username.setValue('kitten69');
}

Tu peux ensuite appeler la méthode changeUsername() de ton component où tu le souhaites, que ce soit dans ton typescript ou dans ton template html au clique par exemple.

Challenge

Réactive-toi !

Le but de ce challenge est de créer un formulaire d'inscription avec les informations suivantes :

• Nom d'utilisateur
• Email
• Mot de passe
• Adresse composée d'une rue, d'un code postal et d'une ville

Lors du clique sur le bouton d'inscription, tu dois créer un nouvel utilisateur et afficher ses informations en dessous du formulaire.

Critères de validation

• Les champs du formulaire doivent être reliés à des FormControl
• Lors du clique sur le bouton Inscription tu dois créer un nouvel objet du type User
• Le nouvel objet user créé lors de l'inscription doit contenir les informations tapées par l'utilisateur dans le formulaire
• Les informations du nouvel utilisateur créé doivent s'afficher sous le formulaire.
• Attention, aucun ngModel ne sera toléré pour ce formulaire, ça voudrait dire que tu utilises le template driven form !