form-generator-angular v0.5.5

FormGenerator

Cette librairie permet la génération automatique du HTML d'un formulaire en fonction d'un formGroup donné.

Utiliser

Cette librairie nécessite les dépendances suivantes

"@angular/common": "^10.1.2",`

`"@angular/core": "^10.1.2",`

`"@angular/material": "^10.1.2",`

`"@angular/cdk": "^10.1.2",`

`"@angular/platform-browser": "^10.1.2"

Pour utiliser la librairie, après l'import il faut créer un formGroup dans le component.ts dans lequel on veut générer le formulaire par exemple :

form = new FormGroup({
    expeditor: new SelectControl({id: uuidv4(), name: "expeditor", label: "Magasin expéditeur", valuesEnable: [{storeCode: "M03" , name: "test"}], valueLabelPropertieName: "name", defaultValue: "M03"}, "", [Validators.required]),
    receivor: new SelectControl({id: uuidv4(), name: "receivor", label: "Magasin destinataire", valuesEnable: ["M03", "MN2"]}, "", [Validators.required]),
    comment: new TextAreaControl({id: uuidv4(), name: "comment", label: "Motif: "}, "",[Validators.required]),
    articles: new MultipleAddControl({labelToAdd: "Ajouter un article", formType: this.formToAddArticle, 
    functionToReturnLabelToShow: this.getArticleLabel, id: uuidv4(), name: "articles", label: "Articles"},"", [Validators.required])
  })

Dans cet exemple on a deux champs select et un text area. Les premiers paramètres seront expliqués ci-dessous, pour les deux derniers ils sont optionnels et correspondent dans tous les cas aux paramètres des FormControl.

Vous pouvez également ajouter une liste de message d'erreurs qui seront visible en fonction des validateurs de formulaire utilisés.

errorsLabel: Map<string, string>;
constructor() {
    this.errorsLabel = new Map();
    this.errorsLabel.set('required', "Ce champ est requis");
}

Dans le fichier html il suffit de rejouter :

<form-generator [errorsLabel]="errorsLabel" [form]="form"></form-generator>

ATTENTION: Il faut utiliser la balise et pas sinon vous aurez l'erreur :

Error: src/app/components/create/create.component.html:50:3 - error NG8001: 'form-generator-angular' is not a known element:

1. If 'form-generator-angular' is an Angular component, then verify that it is part of this module.
2. If 'form-generator-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

La librairie est configurable en ajoutant le paramètre

[configs]="config"

à la déclaration du formGenerator. config étant un objet Configuration.

Champ otpionnel

Pour rendre un champ optionnel il faut lui affecter une fonction comme paramètre ngIfFunction. Par exemple:

date: new DateControl({id: "date", name: "date", label: "Date de mariage", min: new Date(2021, 1, 12),
    ngIfFunction: (element) => {
    	return this.form.controls["radio"].value && this.form.controls["radio"].value.name ===  "option1";
	}}, 
"", [Validators.required])

Ici un champ date est affiché uniquement si le champ control est à la valeur ayant pour nom "option1".

Support

La librairie supporte actuellement

Configuration

La configuration se fait au moyen d'un objet Configuration qui contient les paramètres suivants.

Updates

V.0.1.0 Le placement des variables dans les classes héritant de GeneratorControl a été modifié pour ajouter une valeur par défaut. Cela impacte toute déclaration de classe héritant de GeneratorControl.

V 0.2.0 Le placement des variables dans les classes héritant de GeneratorArrayControl a été modifié pour ajouter les valeurs par défaut.

V 0.3.0 Les configurations propres à chaque control sont maintenant dans des interfaces. Les déclarations se font au moyen d'un objet implémentant cette interface.

V 0.3.14 Ajout des radios boutons.

V 0.3.15. Ajout du champ date.

V 0.3.16 Ajout d'un paramètre permettant de rendre optionnel les control.

V 0.4.0 Update to v15 angular

V 0.5.0 Update to v18 angular

v 0.5.5 Input file en multiple

Common

This library was generated with Angular CLI version 10.1.6.

Code scaffolding

Run ng generate component component-name --project form-generator to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project form-generator.

Note: Don't forget to add --project form-generator or else it will be added to the default project in your angular.json file.

Build

Run ng build form-generator to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build form-generator, go to the dist folder cd dist/form-generator and run npm publish.

Running unit tests

Run ng test form-generator to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

TODO

• Ajouter une gestion fine de l'event valuesChange pour indiquer quels sont les éléments qui changent
• Dans le cas où on définit un min et un max ajouter automatiquement un validators