Rd-forms NPM | npm.io

RD-Forms

RD-Forms is a library for Angular intended to reduce boiler plate code in form creation, this library allows you to make forms and multipaged forms through the DOM without defining and binding form fields in html.

Installation

Use the package manager npm to install RD-Froms.

npm i rd-forms

Usage

To start building forms first you have to specify the fields trough the .TS file of the component, currently the library supports five field types that you can customize with different validators, custom labels and property paths to create/edit objects.

Boolean field

This control allows you to create a field to ask for a yes/no, true/false information

Constructor:

fieldRoute - object's path to the property / variable.
fieldName - text to be shown in the lable for the field.
validators - angular validators to be applied in the user's input

    constructor(fieldRoute: string, fieldName: string, validators?: Validators[])

import {BooleanRDFormField} from 'rd-forms';
/**
    component definition;
*/
    ngOnInit():void{
        BooleanRDFormField bff =    new BooleanRDFormField("status","Accept");
    }

Text field

This control allows you to create a field to ask for text input.

Constructor:

fieldRoute - object's path to the property / variable.
fieldName - text to be shown in the lable for the field.
validators - angular validators to be applied in the user's input

    constructor(fieldRoute: string, fieldName: string, validators?: Validators[])

import {TextRDFormField} from 'rd-forms';
/**
    component definition;
*/
    ngOnInit():void{
        TextRDFormField tff =    new TextRDFormField("name","Name");
    }

Date field

This control allows you to create a field to ask for a date input, and allows youy to format the answer.

Constructor:

fieldRoute - object's path to the property / variable.
fieldName - text to be shown in the lable for the field.
dateFormat - text with the format to transform the input.
validators - angular validators to be applied in the user's input

    constructor(fieldRoute: string, fieldName: string, dateFormat?: string, validators?: Validators[])

import {DateRDFormField} from 'rd-forms';
/**
    component definition;
*/
    ngOnInit():void{
        DateRDFormField dff =    new DateRDFormField("date","Date");
    }

Select field

This control allows you to create a field to ask for a user's choice.

Constructor:

fieldRoute - object's path to the property / variable.
fieldName - text to be shown in the lable for the field.
options - options to be shown in the select.
validators - angular validators to be applied in the user's input

    constructor(fieldRoute: string, fieldName: string, options: SelectRDOption[], validators?: Validators[])

import {SelectRDFormField} from 'rd-forms';
/**
    component definition;
*/
    ngOnInit():void{
        let countryOptionList : SelectRDOption[] = []; 
        countryOptionList.push(new SelectRDOption("COD01","JAPAN"));
        countryOptionList.push(new SelectRDOption("COD02","SOUTH KOREA"));
        SelectRDFormField sff = new SelectRDFormField("country.code","Country",countryOptionList);
    }

Pageable Select field

This control allows you to create a field to ask for a user's choice, tipically used when there's too many answers to load at once. This control only shows a list at a time and emits and event whenever it changes page so the lilst can be refreshed.

Constructor:

fieldRoute - object's path to the property / variable.
fieldName - text to be shown in the lable for the field.
totalPages - number of pages in the select.
options - options to be shown in the select.
validators - angular validators to be applied in the user's input

    constructor(fieldRoute: string, fieldName: string, totalPages: number, options: SelectRDOption[], validators?: Validators[])

When the pageChanged event is activated the component will send an object with the fieldRoute and the page that has been selected, starting numeration in page 1 , in order to capture this event do the following.

    <RD-Form  (pageChanged)="onFieldPageChange($event)"></RD-Form>

import {SelectRDFormField,SelectRDOption} from 'rd-forms';

    sff : SelectRDFormField;
    countryOptionList = [
        [
            new SelectRDOption("COD01","JAPAN"),
            new SelectRDOption("COD02","KOREA")
        ],
        [
            new SelectRDOption("COD03","INDONESIA"),
            new SelectRDOption("COD04","THAILAND")
        ]
    ];
    /**
        component definition;
    */
    ngOnInit():void{
        sff = new SelectRDFormField("country.code","Country",2,countryOptionList[0]);
    }
    
    onFieldPageChange(fieldPageChanged){
        if(fieldPageChanged.field === "country.code"){
            let pageNumber = fieldPageChanged.page - 1; 
            sff.options = countryOptionList[pageNumber]
        }
    }

Form validation

All of the RD-Form controls use the base validators provided by Angular, to use the validators you must first include their library and then pass them to the form control iside an array.

    import { Validators } from '@angular/forms';
    
    /**
        component definition
    */
    ngOnInit():void{
        // a required text field that is only valid if you enter  numbers 
        TextRDFormField tff =    new TextRDFormField("name","Name",[Validators.required,Validators.pattern("[0-9]*")]);
    }

Form Creation example

First you must specify the form composition trough the .ts file of the component using the RD-Form controls, the fields for the form must be declared in a 2d dimensional array.

export class AppComponent implements OnInit{
    createEditObject = {};
    formPages = [];
    cityOptionList = [
        new SelectRDOption("COD01","TOKYO"),
        new SelectRDOption("COD02","SEUL")
    ];
    countryOptionList = [
        [
            new SelectRDOption("COD01","JAPAN"),
            new SelectRDOption("COD02","KOREA")
        ],
        [
            new SelectRDOption("COD03","INDONESIA"),
            new SelectRDOption("COD04","THAILAND")
        ]
    ];
    constructor(){}
    
    ngOnInit():void{
        this.formPages = [
        //form definition
          [ 
            new TextRDFormField("name","Name",[Validators.required,Validators.pattern("[A-Za-z]+")]),
            new TextRDFormField("address","Address",[Validators.required]),
            new BooleanRDFormField("status","Accept"),
            new PGSelectRDFormField("country.code","City",2,this.countryOptionList[0],[Validators.required]),
            new SelectRDFormField("city.code","Country",this.cityOptionList,[Validators.required]),
            new DateRDFormField("birthday","Birthday")
          ]
    }
}

then create the events for submit, cancel and select page change events

    submit(object){
        this.createEditObject = object;
        console.log(object);
    }
    
    cancel(){
        console.log("Canceled");
    }
    
    onFieldPageChange(fieldPageChanged){
        if(fieldPageChanged.field === "country.code"){
            let pageNumber = fieldPageChanged.page - 1; 
            this.formPages[0][3].options = countryOptionList[pageNumber]
        }
    }

Then add RD-Form in the component's html template and bind the parameters.

<div class="mt-4">
  <RD-Form  [pages]="pages" (submitEvt)="submit($event)" (cancelEvt)="cancel()"
   (pageChanged)="onFieldPageChange($event)"></RD-Form>
</div>

If you want to edit an object, just use the object parameter of the component like this, it will show all the current values of the object in the form.

<div class="mt-4">
  <RD-Form  [object]="createEditObject" [pages]="pages" (submitEvt)="submit($event)" (cancelEvt)="cancel()"
   (pageChanged)="onFieldPageChange($event)"></RD-Form>
</div>

If you want to create a multi-page form you just need to fill the form definition array with more field arrays, set showFormPageControls parameter to true and define titles for every page in the form, this last one totally optional.

export class AppComponent implements OnInit{
    createEditObject = {};
    formPages = [];
    formPageTitles = ['Basic information', 'Location information']
    cityOptionList = [
        new SelectRDOption("COD01","TOKYO"),
        new SelectRDOption("COD02","SEUL")
    ];
    countryOptionList = [
        [
            new SelectRDOption("COD01","JAPAN"),
            new SelectRDOption("COD02","KOREA")
        ],
        [
            new SelectRDOption("COD03","INDONESIA"),
            new SelectRDOption("COD04","THAILAND")
        ]
    ];
    constructor(){}
    
    ngOnInit():void{
        this.formPages = [
        //form definition
          [ 
            new TextRDFormField("name","Name",[Validators.required,Validators.pattern("[A-Za-z]+")]),
            new TextRDFormField("lastname","Lastname",[Validators.required]),
            new BooleanRDFormField("status","Accept"),
            new DateRDFormField("birthday","Birthday")
        ],
        [
            new PGSelectRDFormField("country.code","Country",2,this.countryOptionList[0],[Validators.required]),
            new SelectRDFormField("city.code","City",this.cityOptionList,[Validators.required]),
            new TextRDFormField("neighborhood","Neighborhood",[Validators.required,Validators.pattern("[A-Za-z]+")]),
            new TextRDFormField("address","Address",[Validators.required])
        ]
    }
}

<div class="mt-4">
  <RD-Form [pageTitles]="formPageTitles" [object]="createEditObject" [showFormPageControls] = "true" [pages]="pages" (submitEvt)="submit($event)" (cancelEvt)="cancel()"
   (pageChanged)="onFieldPageChange($event)"></RD-Form>
</div>

tslib

@infinitebrahmanuniverse/nolb-rd @everything-registry/sub-chunk-2536

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago