angular-reactive-dynamic-forms
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.7 • Public • Published

    angular-reactive-dynamic-forms


    It fully automates form UI creation by introducing a set of maintainable JSON, dynamic form control components and dynamic form control service.

    See DEMO


    Table of Contents



    Getting Started

    1. Install the core package:

    npm i angular-reactive-dynamic-forms --save
    

    2. Create CSS file and Import CSS style (angular.json):

    ...
        "styles": [
            ...
            "src/form-css.css",
            ...
        ],
    ...
    

    Running the Sample

    1. Clone the Git repository:

    git clone https://github.com/praveenkanchan/angular-reactive-dynamic-forms.git
    
    cd angular-reactive-dynamic-forms
    

    2. Install the dependencies:

    npm i
    

    3. Run the application:

    npm start
    

    Basic Usage

    1. Import DynamicFormControllerModule and a UI module:

    import { DynamicFormControllerModule } from "angular-reactive-dynamic-forms";
      
    @NgModule({
     
        imports: [
            ...
            DynamicFormControllerModule
        ]
    });
     
    export  class  AppModule {}

    2. Create a FormGroup via DynamicFormService:

    import { DynamicFormService, FormConstants, FieldConfig, DefaultConfig } from 'angular-reactive-dynamic-forms';  
     
    export class DynamicFormComponent implements OnInit {
     
        formGroup: FieldConfig[] = [];
        defaultConfig: DefaultConfig = {};
     
        constructor(private  _dynamicFormService: DynamicFormService) {}
     
        ngOnInit() {
            this.formGroup = [
                ...
            ];
     
            this.defaultConfig = {
                formStyle: FormConstants.formStyle.vertically, // or FormConstants.formStyle.horizontal
                class: 'dynamic-form',
                validateForm: false, // Default value
                bootstrapClass: true // Default value
            };
     
            this._dynamicFormService.setFormFields(this.formGroup, this.defaultConfig);
        }
    }

    3. Add a DynamicFormComponent :

    <dynamic-form-controller (submitEvent)="submitEvent($event)"></dynamic-form-controller>


    Features

    1. Version Support :

    Ionic 4 Angular angular-reactive-dynamic-forms
    Angular v8.x v8.x
    Angular v7.x v7.x
    Angular v6.x v6.x


    2. Relation Update :

    readonly class display
    AND
    OR


    3. Validation Update :

    required min max minLength maxLength email mobile float pattern customMsg
    number
    textBox
    password
    textArea
    colorPicker
    signaturePad
    dateTextBox
    timeTextBox
    checkBox Group
    radio Group
    selectOption
    files
    image
    hidden
    stepWizard
    button


    4. Event Update :

    clickEvent changeEvent
    number
    textBox
    password
    textArea
    colorPicker
    signaturePad
    dateTextBox
    timeTextBox
    checkBox Group
    radio Group
    selectOption
    files
    image
    hidden
    stepWizard
    button


    Form Groups

    In order to improve clarity it's often considered good practice to group forms into several logical fieldset sections.

    1. Create a FormGroup and add a DynamicFormComponent and example of GridColumn:

    ngOnInit() {
        this.formGroup = [
            {
                id:  "row1",
                label:  "",
                class:  "",
                bootstrapClass: false, // Remove bootstrap class for using grid
                gridColumnCount: 5,
                fields: [
                    {
                        type:  FormConstants.fieldType.textBox,
                        label:  "Email",
                        name:  "email",
                        attr: {
                            class:  "",
                            placeholder:  "Email",
                            display: true // Default value
                        },
                        value:  "",
                        gridLayout: {
                            startColumn: 1,
                            endColumn: 4,
                            startRow: 1,
                            endRow: 2
                        },
                        validations: []
                    },
                    {
                        type:  FormConstants.fieldType.password,
                        label:  "Password",
                        name:  "password",
                        attr: {
                            class:  "",
                            placeholder:  "Password",
                            display: true // Default value
                        },
                        value:  "",
                        gridLayout: {
                            startColumn: 4,
                            endColumn: 6,
                            startRow: 1,
                            endRow: 2
                        },
                        validations: []
                    }
                ]
            }
        ];
     
        this._dynamicFormService.setFormFields(this.formGroup);
    }
    <dynamic-form-controller (submitEvent)="submitEvent($event)"></dynamic-form-controller>

    2. You can add divider in every rows:

    this.formGroup = [
        {
            id:  "row1",
            label:  "",
            divider: true,
            fields: [
                ...
            ]
        }
    ];

    3. You can relate one or more fields with conditional values:

    this.formGroup = [
        {
            id:  "row1",
            fields: [
                {
                    type:  FormConstants.fieldType.textBox,
                    label:  "name",
                    name:  "name",
                    attr: {
                        class:  "",
                        placeholder:  "name"
                    },
                    value:  "",
                    relation: [
                        {
                            action: FormConstants.relationType.readonly,
                            operation: FormConstants.operationType.AND,
                            value: true, // Default value
                            where: [
                                {
                                    rowId: "row1",
                                    fieldName: "name",
                                    value: "xyz"
                                },
                                {
                                    rowId: "row1",
                                    fieldName: "number",
                                    value: "XXXXX"
                                }
                            ]
                        },
                        {
                            action: FormConstants.relationType.readonly,
                            operation: FormConstants.operationType.OR,
                            value: true, // Default value
                            where: [
                                {
                                    rowId: "row1",
                                    fieldName: "name",
                                    value: "abc"
                                },
                                {
                                    rowId: "row1",
                                    fieldName: "number",
                                    value: "321"
                                }
                            ]
                        }
                    ]
                },
                {
                    type:  FormConstants.fieldType.textBox,
                    label:  "Number",
                    name:  "number",
                    attr: {
                        class:  "",
                        placeholder:  "Number"
                    },
                    value:  ""
                }
            ]
        }
    ];

    4. You can click this button then validate value and return form values:

    this.formGroup = [
        ...
        {
            id: "row1",
            label: "",
            class: "",
            fields: [
                {
                    type: FormConstants.fieldType.button,
                    label: "Save",
                    clickEvent: {
                        validateForm: true
                    },
                    name: "save",
                    attr: {
                        class: "btn-success"
                    }
                }
            ]
        }
    ];

    5. You can click this button then return form values without validate value:

    this.formGroup = [
        ...
        {
            id: "row1",
            label: "",
            class: "",
            fields: [
                {
                    type: FormConstants.fieldType.button,
                    label: "Save",
                    clickEvent: {
                        returnValue: true
                    },
                    name: "save",
                    attr: {
                        class: "btn-success"
                    }
                }
            ]
        }
    ];

    6. You can click this button then return reactive form object:

    this.formGroup = [
        ...
        {
            id: "row1",
            label: "",
            class: "",
            fields: [
                {
                    type: FormConstants.fieldType.button,
                    label: "Save",
                    clickEvent: {
                        returnFormObject: true
                    },
                    name: "save",
                    attr: {
                        class: "btn-success"
                    }
                }
            ]
        }
    ];

    7. You can click this button then return fields form JSON object:

    this.formGroup = [
        ...
        {
            id: "row1",
            label: "",
            class: "",
            fields: [
                {
                    type: FormConstants.fieldType.button,
                    label: "Save",
                    clickEvent: {
                        returnFieldObject: true
                    },
                    name: "save",
                    attr: {
                        class: "btn-success"
                    }
                }
            ]
        }
    ];

    8. You can click this button then reset form values:

    this.formGroup = [
        ...
        {
            id: "row1",
            label: "",
            class: "",
            fields: [
                {
                    type: FormConstants.fieldType.button,
                    label: "Reset",
                    clickEvent: {
                        resetForm: true
                    },
                    name: "reset",
                    attr: {
                        class: "btn-info"
                    }
                }
            ]
        }
    ];

    9. You can validate form with DynamicFormService:

    this._dynamicFormService.validateFormField();

    10. You can return values for click event:

    submitEvent(event) {
        console.log('Form values', event);
    }

    11. You can now easily modify your form attributes with DynamicFormService:

    let changeAttrValue = [
        {
            rowId:  'row1',
            fieldName:  'email',
            attrName:  FormConstants.attributeType.readonly,
            value:  true // update attribute value
        },
        {
            rowId:  'row1',
            fieldName:  'email',
            attrName:  FormConstants.attributeType.placeholder,
            value:  'enter valid email id' 
        }
    ];
     
    this._dynamicFormService.updateFormAttr(changeAttrValue);

    12. You can now easily modify your form values with DynamicFormService:

    let changeValue = [
        {
            rowId: 'row1',
            fieldName: 'email',
            value: "xyz@xyz.com"
        }
    ];
     
    this._dynamicFormService.updateFormValue(changeValue);

    Install

    npm i angular-reactive-dynamic-forms

    DownloadsWeekly Downloads

    5

    Version

    3.0.7

    License

    MIT

    Unpacked Size

    1.83 MB

    Total Files

    82

    Last publish

    Collaborators

    • praveenkanchan