ng-generic-form-primeng

Introduction

This Angular library was developed to accelerate form creation. The core idea is to build forms based on a JSON object structure, with all components being generated using PrimeNG.

Building simple form example

ts file

export class ...
form = {
    input1:"hola",
    input2: "hola2"
};
buttons = [
    {
      type: 'save',
      text: 'SAVE',
      command: (val) => {
        this.guardar();/// this function must exists in your component
      },
    }
];

html template

<lib-generic-form #formb [form]="form" [(value)]="valueForm" tittle="Someone tittle" [buttons]="buttonsForm"></lib-generic-form>

The component uses the Tailwind CSS grid system for its styles. This can be configured either through a global provider or by defining the classContent and classItem parameters.

in params:

<lib-generic-form #formb [form]="form" [(value)]="valueForm" tittle="Someone tittle" [buttons]="buttonsForm" [classContent]="'row'" [classItem]="'col-6'"></lib-generic-form>

in provider

providers:[
    {provide:GENERIC_FORM_OPTIONS, useValue:{classContent:'row',classItem:'col-6'}}
]

Advanced Form

You can create a more customizable form by building a JSON configuration.

ts file

form = {
        id: new FormElement({
        type: 'number',
        required: false,
        visible: false,
        }),
        code: new FormElement({ label: 'codigo', type: 'text', required: true }),
        estatusId: new FormElement({
        label: 'estatus',
        type: 'select',
        required: true,
        }),
        name: new FormElement({
        label: 'nombre rol',
        type: 'text',
        required: true,
        colsClass: 'col-span-12',
        })
    }

All configuration is defined in the FormElementConfig interface.