goteti-js-forms v1.1.9

GotetiJsForms

Author: Narasimha Goteti

Goteti-JS-Forms is the TypeScript based library for generating the Forms based on JSON payload, track updates and form validations.

Get Started

Prerequisites : NodeJS

    npm i goteti-js-forms

Code Implementation

    import { GtsFormHub } from 'goteti-js-forms';
    
    // Supported BluePrints :  GtsObjectBP , GtsListBP, GtsInputBP

    let formFieldsBPPayload: GtsObjectBP = {
        isObject: true,
        name: 'registerForm',
        fields: [
            {
                name : 'firstName',
                type: 'text',
                hide: false,
                disable: false,
                label : 'First Name',
                validations: [
                    {
                        key: 'minLength',
                        value: 5
                    }
                ]
            }, {
                name: 'username',
                type: 'email',
            },
            {
                name: 'contacts',
                label: 'Contacts',
                isArray: true,
                init: 2,
                fieldinfo:{  
                    name: 'primarycontact',
                    label: 'Primary Contact',
                    type: 'number',
                }
            }
        ]
    };

    let formHub = new GtsFormHub({ // KeyValue Pair for validation functions
        minLength: (validation, field)=>{
            if(field.value < limits>){
                return {
                    minLength: `Minimum length is ${validation.value} `
                }
            }
        }
    }, function onFormChange(){
        console.log('on Form prop value changes', arguments);
    }, {
        submitted: false,
        checkOnSubmit: true,
        checkOnDirty: false
    });

    //Supported form types: GtsFormInput | GtsFormObject | GtsFormList; 

    // To Create the form object using the blueprint formHub.build(blueprintpayload)
    let formdata :  GtsFormObject = formHub.build(formFieldsBPPayload);

    // To Create the form object with updated info using the blueprint formHub.update({...updatedInfo}, blueprintpayload)
    let formdata: GtsFormObject = formHub.update({firstname: 'Narasimha', contacts: ['1234567890', '9876543210']}, formFieldsBPPayload)


    //To Add new record to array
    formdata.prop('contacts').addToList({...formdata.prop('contacts').config.fieldinfo, name :'workcontact' label :'Work Contact', value: '1111111111'}, index_optional)
    
    // To remove a record from array
    formdata.prop('contacts').removeFromList(index_mandatory);

    // To detect the changes to the form field values.
    let destroyDetection = formdata.detectChanges().onChange((...args)=>{
        console.log(args);
    });

    // When change detection needs to be destroyed use "destroyDetection.destroy();"

Accessing

Note: 'hashid' property updates with random string on every formdata value changes, make use of hashid for change detection in angular / react.

Usage

    /* Angular */

    <input 
        type="text"  
        [(ngModel)]="formdata.prop('firstname').value" 
        *ngIf="formdata.prop('firstname').hidden"
        [disabled]="formdata.prop('firstname').disabled"
        />


    /* React */
    destroyListners;
    componentDidMount(){
      destroyListners = formdata.detectChanges().onChange((...args)=>{
            this.setState({updatenow: new Date()})
        })
    }

    componentWillUnmount(){
        destroyListners.destroy();
    }

    handleEvent(e: any){
        formdata.prop('firstname').value = e.target.value;
        // formdata.prop('firstname').update(e.target.value); // all statuses and change detections are triggered
        // formdata.prop('firstname').setValue(e.target.value); Only value is updated but change detections are not triggered;
        // formdata.prop('firstname').setValueOnly(e.target.value);
        // Access Errors: formdata.prop('firstname').errors;
        // Access Validity: formdata.prop('firstname').isValid;
        // Access Dirty: formdata.prop('firstname').dirty;
        // Access touched: formdata.prop('firstname').touched;
    }

    <input type="text" onChange={handleEvent}/>

Other available functions

dotNotation(object<any>, string)
GtsInterpolate(object<any>, string)
GtsProxyWatch(watchCallbackFunction, object<any>, key)
@GtsInputDebounce(delayTimeInMilliSeconds)

Licence

Open Source.

The author is not liable for any liabilities.