Cette librairie permet la génération automatique du HTML d'un formulaire en fonction d'un formGroup donné.
npm install form-generator-angular
"@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;
constructor() {
this.errorsLabel = new Map();
this.errorsLabel.set('required', "Ce champ est requis");
}
`
Dans le fichier html il suffit de rejouter :
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.
$3
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
| Classe | Explication | Paramètres |
| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| GeneratorControl | Classe qui hérite de FormControl et dont héritent les classes suivantes | - label : texte qui est affiché
- id : id qui apparaît dans les classes
- name : nom du champ dans le formulaire
- defaultValue : définit la valeur par défaut à afficher
- ngIfFunction: champ optionnel permettant de rendre le champ optionnel |
| SelectControl | Correspond à un champ select | - valuesEnable : la liste des valeurs possibles
- valueLabelPropertieName : le nom du paramètre de l'objet dans valuesEnable à afficher pour la sélection. Si null et que vlauesEnable est une liste de string, on affiche simplement le string. TODO passer ce paramètre en une fonction callback |
| TextAreaControl | Correspond à un champ textArea | |
| InputTextControl | Correspond à un champ input text | |
| InputNumberControl | Correspond à un champ input number | - min : valeur minimale
- max : valeur maximale |
| GeneratorArrayControl | Classe qui hérite de FormArray et dont héritent les classes suivantes | - label : texte qui est affiché
- id : id qui apparaît dans les classes
- name : nom du champ dans le formulaire
- defaultValues : valeurs par défaut. Est un objet qui possède les même keys que l'objet contenu dans le formType.
- ngIfFunction: champ optionnel permettant de rendre le champ optionnel |
| MultipleAddControl | Correspond à un FormArray où l'on rajoute une quantité indéterminée de fois le même élément | - formType : le formulaire à rajouter dans la liste
- functionToReturnLabelToShow : fonction callback qui prend un formulaire en paramètre, et retourne un string. Le retour est la valeur affichée dans l'affichage des éléments.
- labelToAdd : valeur affichée dans le bouton pour ajouter l'élément à la liste |
| RadioButtonControl | Correspond à un bouton radio | - valuesEnable : la liste des valeurs possibles
- valueLabelPropertieName : le nom du paramètre de l'objet dans valuesEnable à afficher pour la sélection. Si null et que vlauesEnable est une liste de string, on affiche simplement le string. |
| DateControl | Correspond à un champ date | -min: champ optionnel indiquant la date minimale
-max: champ optionnel indiquant la date maximale
-locale: champ optionnel permettant de définir les paramètres correspondant au pays, pour l'instant changer ce paramètre est le seul moyen de changer le format de date, par défaut la locale est fr
-formatLabel: champ optionnel, format affiché sous l'input pour informer l'utilisateur qui souhaite rentrer la date manuellement sur le format à rentrer, pour un bon fonctionnement, il doit correspondre au format de la locale |
Configuration
La configuration se fait au moyen d'un objet Configuration qui contient les paramètres suivants.
| Nom | Type | Valeur par défaut | Description |
| --------------------- | ------- | ----------------- | ------------------------------------------------ |
| showErrorOnlyTounched | boolean | false | Si true ne montre les erreurs qu'une fois touché |
$3
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.
$3
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.
$3
Run ng build form-generator to build the project. The build artifacts will be stored in the dist/ directory.
$3
After building your library with ng build form-generator, go to the dist folder cd dist/form-generator and run npm publish.
$3
Run ng test form-generator to execute the unit tests via Karma.
$3
To get more help on the Angular CLI use ng help` or go check out the Angular CLI README.