Si vous êtes habitué à travailler avec les formulaires réactifs (Reactive forms) et à créer de nombreux formulaires, vous avez probablement remarqué que cela prend du temps et que vous répétez souvent les mêmes étapes. Aujourd'hui, après avoir testé et exploré plusieurs façons de simplifier cela, j'ai décidé de créer ma propre version de formulaire dynamique. Bien sûr, il existe déjà des solutions existantes, mais j'ai choisi de m'appuyer sur certains concepts pour créer mon propre composant dynamique. Code source disponible sur gitLab : https://gitlab.com/eroamba/dynamic_form ### Introduction Notre formulaire est dynamique et entièrement réutilisable à 100 %. Il est simple à configurer et offre une grande flexibilité. Dans un prochain article, nous explorerons une version améliorée de ce formulaire dynamique. ### Prérequis Nous utiliserons la version @angular/cli@16.1.0 pour notre cas pratique. Avant de commencer, assurez-vous d'ajouter Bootstrap à votre projet en ajoutant les liens suivants dans le fichier index.html : ```html ``` Ici Bootstrap est utilisé pour gérer le positionnement des éléments du formulaire avec les classes CSS. ### Création du projet Commencez par générer un nouveau projet Angular en utilisant la commande suivante : ```bash ng new dynamic_form ``` ### Création du composant dynamique Nous allons créer un composant qui contiendra tous nos champs de formulaire désirés. Dans notre cas, nous incluons la plupart des types de champs courants tels que le texte, l'e-mail, la date, le nombre, les cases à cocher, les sélecteurs et les zones de texte. Vous pouvez ajouter d'autres types selon vos besoins. Commencez par générer le composant **dynamic-input** avec la commande suivante : ```bash ng generate component dynamic-input ``` Ensuite, dans le fichier **dynamic-input.component.ts**, importez les modules nécessaires et définissez les propriétés et méthodes nécessaires : ```typescript import { CommonModule } from '@angular/common'; import { Component, Input, Optional, Self } from '@angular/core'; import { ControlContainer, ControlValueAccessor, FormGroup, FormGroupDirective, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms'; export const NOOP_VALUE_ACCESSOR: ControlValueAccessor = { writeValue(): void { }, registerOnChange(): void { }, registerOnTouched(): void { } }; @Component({ selector: 'app-dynamic-input', standalone: true, templateUrl: './dynamic-input.component.html', styleUrls: ['./dynamic-input.component.css'], imports: [CommonModule, FormsModule, ReactiveFormsModule], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }) export class DynamicInputComponent { @Input() checkedValue: boolean = true @Input() data: any[] = [] @Input() dynamicForm: FormGroup = new FormGroup({}); constructor(@Self() @Optional() public ngControl: NgControl) { if (this.ngControl) { this.ngControl.valueAccessor = NOOP_VALUE_ACCESSOR; } } getErrorMessage(control: { name: any; validations: any; }) { const formControl = this.dynamicForm.get(control.name); if (formControl) { for (let validation of control.validations) { if (formControl.hasError(validation.name)) { return validation.message; } } } return ''; } } ``` Cela permettra au composant **dynamic-input** d'accéder au FormGroup parent. ### Configuration JSON des formulaires Pour organiser notre projet de manière propre et maintenable, nous allons créer un dossier **form-data** où nous stockerons nos fichiers de formulaire au format **JSON**. Dans ce dossier, nous aurons un fichier nommé **role.ts** qui contiendra notre formulaire de rôle : ```typescript export const ROLE_FORM = [ { type: "text", id: "name", label: "nom", placeholder: "Saisissez le nom", formControlName: "name", classContainer: "col-sm-12", defaultValue: "", validations: [ { name: "required", validator: "required", message: "Name is required" } ] }, { type: "textarea", id: "description", label: "Description", placeholder: "Saisissez la description", formControlName: "description", classContainer: "col-sm-12", defaultValue: "", validations: [ { name: "required", validator: "required", message: "Description is required" } ] } ]; ``` ### Template HTML du composant dynamique Dans notre composant **dynamic-input**, le fichier HTML génère dynamiquement les différents types de champs de formulaire en fonction des données fournies : ```html

``` ### Utilisation dans le composant principal Dans le composant principal **app.component.ts**, nous utilisons notre composant dynamique : ```typescript import { Component } from '@angular/core'; import { ROLE_FORM } from './form-data/role'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'dynamic_form'; formDataRole: any[] = ROLE_FORM; fbGroupRole: FormGroup = new FormGroup({}); constructor(private fb: FormBuilder) { this.fbGroupRole = this.fb.group(this.createRoleFormControls()); } createRoleFormControls() { const formControls: any = {}; this.formDataRole.forEach(control => { let validators: any[] = []; if (control.validations) { control.validations.forEach((validation: any) => { if (validation.validator === 'required') { validators.push(Validators.required); } else if (validation.validator === 'email') { validators.push(Validators.email); } }); } const defaultValue = control.defaultValue !== undefined ? control.defaultValue : ''; formControls[control.formControlName] = [defaultValue, validators]; }); return formControls; } saveRole() { alert(JSON.stringify(this.fbGroupRole.value)); } } ``` ### Conclusion En conclusion, notre composant de formulaire dynamique fonctionne parfaitement, et nous avons la possibilité de personnaliser son apparence en utilisant du CSS pour positionner les champs selon nos besoins. Cette approche nous permet de créer des formulaires dynamiques qui s'adaptent à différents scénarios d'utilisation. Cependant, malgré sa flexibilité, je trouve que cette approche a ses limites. Dans notre prochain article, nous explorerons une version améliorée de notre composant dynamique, visant à le rendre encore plus flexible et adaptable à une plus grande variété de cas d'utilisation. Restez à l'écoute pour la prochaine version de notre composant dynamique de formulaire, et n'hésitez pas à expérimenter et à personnaliser celui-ci selon vos besoins spécifiques.