angular-reactive-dynamic-forms

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

• Running the Sample

• Basic Usage

• Features

• Form Groups

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: "[e-mail]"
    }
];

this._dynamicFormService.updateFormValue(changeValue);