Comment créer un formulaire dynamique en Angular à partir de JSON?

Dans ce tutoriel, nous allons voir comment créer un formulaire dynamique en Angular à partir de JSON.Il nous arrive de rencontrer des cas où nous devions peut-être ajouter plusieurs champs dans un formulaire dynamique Angular en fonction d’un cas d’utilisation différent ou d’un écran basé sur les rôles.

Par exemple, nous pourrions vouloir ajouter dynamiquement un champ pour différents types de rôles d’utilisateur ou même ajouter simplement un champ dynamiquement.

LIRE AUSSI: Comment créer un intercepteur http en Angular ?

Nous pouvons laisser le développeur décider s’il souhaite ajouter d’autres champs au formulaire.

Dans cet article, nous allons travailler avec un exemple simple, en prenant un fichier JSON et en l’utilisant comme modèle pour rendre dynamiquement un formulaire angulaire réactif.

Le fichier de configuration JSON gardera nos exemples plus simples mais c’est votre projet alors faites ce que vous voulez, faites un appel HTTP à votre serveur API pour le truc JSON, compilez le fichier JSON avec l’application, ou même…

Voici les données que nous utiliserons pour créer un formulaire dynamique en Angular.


[
    {
        "fieldName": "Name",
        "fieldType": "text",
        "required": true
    },
    {
        "fieldName": "Email",
        "fieldType": "email",
        "required": true,
        "validator": "email"
    },
    {
        "fieldName": "Message",
        "fieldType": "text",
        "required": null
    }
]

Nous utiliserons ce JSON comme déclaration dynamique de ce à quoi ressemblera notre formulaire.

Pourquoi dynamique ?

Parce que au moment où nous aurons cet formulaire dynamique Angular entièrement câblée, tout ce que nous aurons à faire est de changer les données du fichier JSON à la volée pour répondre aux caprices de votre patron. Le formulaire peut être configuré dynamiquement.

Vous souhaitez ajouter un champ ? Ajoutez simplement un nouvel élément au tableau JSON.

Créer un formulaire dynamique Angular à partir de JSON

Nous allons d’abord générer une classe utilisée pour modéliser nos champs de formulaire et la désérialiser agréablement.

ng g class form-field

Et puis dans le fichier form-field.ts nous déclarerons les propriétés JSON comme ça.

export class FormField {
    fieldName: string;
    fieldType: string;
    required: boolean = false;
    validator: string;
}

Ensuite, dans le fichier typescript de notre composant, nous utiliserons un client HTTP pour charger le JSON et le rendre.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { FormField } from '../form-field';
import { FormControl, 
             FormGroup, 
             ValidatorFn, 
             Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {

  formFields: FormField[];
  form = new FormGroup({});

  constructor(
    private httpClient: HttpClient
  ) { }

  ngOnInit(): void {
    this.httpClient.get<FormField[]>("/assets/form.json").subscribe((formFields) => {
      for (const formField of formFields) {
        this.form.addControl(formField.fieldName, new FormControl('',this.getValidator(formField)));
      }
      this.formFields = formFields;
    });
  }

  onSubmit(): void {
    if (this.form.valid) {
      let value = this.form.value;
    }
  }

  private getValidator(formField: FormField): ValidatorFn {
    switch(formField.validator) {
      case "email":
        return Validators.email;
      case "required":
        return Validators.required;
      default:
        return null;
    }
  }

}

Et enfin, voici les éléments HTML de notre composant.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div *ngFor="let formField of formFields" class="form-group">
        <label> {{ formField.fieldName }}</label>
        <input class="form-control" 
                   type="{{ formField.fieldType }}" 
                   value="{{ formField.fieldName }}" 
                  [required]="formField.required" 
                  formControlName="{{ formField.fieldName }}" />
        <br>
    </div>
    <button type="submit" 
                 class="btn btn-primary" 
                 [disabled]="this.form.invalid">Submit</button>
</form>

Avec une touche de Bootstrap CSS, nous obtenons un formulaire simple comme celui-ci.

Conclusion

Ceci est un exemple très basique de la façon dont on peut créer un formulaire dynamique en Angular à partir de JSON.

Et puisque vous êtes malin, je suis sûr que vous avez remarqué que cet exemple a ses limites. Un domaine où il manque est la validation des entrées.

LIRE AUSSI: https://angular.io/guide/dynamic-form