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

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: "xyz@xyz.com"
    }
];
 
this._dynamicFormService.updateFormValue(changeValue);