npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

form-generator-angular

v0.5.3

Published

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

Downloads

61

Readme

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

| 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é |

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

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