Les Reactives Forms avec Angular

Salut les dévs, alors comme promis, let's go pour ce premier post qui présentera un nouveau module introduit dans la version 2 de Angular. Cette nouveauté vient s'ajouter au template driven form, la manière de gérer les formulaires dans AngularJS. Cette dernière consiste à utiliser les directives pour gérer le formulaire. Cependant, la manière Reactive ou The Reactive Way comme j'aime l'appeler est plus puissant, plus flexible et moins polluant :-)

Tout d'abord, pour utiliser les Reactive Forms, il nous faut importer le module ReactiveFormsModule qui se trouve dans le package @angular/forms dans notre module racine (app.module.ts). L'avantage du Reactive Way, c'est que tout le traitement du formulaire est géré dans notre controller et du coup le template se retrouve plus épuré, voici un exemple simple, commençons par notre controller:

// j'ai omis les imports ....

@Component({})
export class RegistrationComponent implements OnInit {
    form: FormGroup; // a1

    constructor(private fb: FormBuilder) {} // a2

    ngOnInit() { // a3
      this.form = this.fb.group({
        id: [null],

        // vous pouvez initialiser le champ avec une valeur 
        // => username: ['podisto', Validators.required]

        username: [null, Validators.required],
        firstname: [null, [Validators.required, Validators.minLength(5)]]
      }); // a7
    }  
   
  // traitement de notre formulaire
  onSubmit() {
    console.log(this.form.valid); // true or false
    console.log(this.form.value.username) // return username
  }
}

Nous allons détailler un peu les grandes lignes de cette classe:

• a1: nous déclarons notre formulaire
• a2: le FormBuilder nous permet de construire notre formulaire avec le minimum de code possible. Nous aurions bien pu utiliser cette syntaxe:

this.form = new FormGroup({
  username: new FormControl(),
  firstname: new FormControl()
});

Mais vous êtes d'accord avec moi, c'est trop verbeux.

• De a3 à a7: nous créons notre formulaire dans la méthode ngOnInit (un des cycles d'évenements d'un composant) avec les champs. La classe Validators permet de mettre en place les stratégies de validations (built-in comme personnalisés). Pour appliquer plusieurs règles de validations à un champ, il faut le mettre dans un tableau (champ username par exemple qui est requis et qui doit faire au minimum 5 caractères).

Maintenant, jetons un coup d'oeil à notre template:

<form [formGroup]="form">
  <input formControlName="username" type="text" 
         placeholder="Username" />
  <span *ngIf="form.get('username').hasError('required')">
    Veuillez saisir le nom d'utilisateur.
  </span>

  <input formControlName="firstname" type="text" />
  <button type="button" (click)="onSubmit()" [disabled]="form.invalid">Valider</button
</form>

• La directive [formGroup] permet de dire au template voici notre formGroup qui sera géré par le controller.
• Chaque champ de notre formulaire doit avoir la directive formControlName avec comme valeur les champs du formulaire dans notre controller.
• form.get('field') permet d'accéder à nos champs et d'effectuer pas mal d'opérations, par exemple vérifier si une erreur de validation s'est produite.
• Et enfin, vous voyez comme c'est facile par exemple de désactiver le bouton de validation tant que le formulaire n'est pas valide, un coup de form.invalid et le tour est joué.

Donc, avec ce simple exemple, vous pouvez avoir un aperçu de la puissance du module ReactiveForms. Dans un prochain chapitre, nous verrons par exemple, comment écouter un formulaire, activer ou désactiver certains champs, rendre obligatoire certains en fonction de la valeur d'un autre champ, truc du genre.