dynamic-form-controller.component v1.0.0

angular-reactive-dynamic-forms

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

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
        };

        this._dynamicFormService.setFormFields(this.formGroup, this.defaultConfig);
    }
}

3. Add a DynamicFormComponent :

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

Features

1. Version Support :

2. Relation Update :

3. Validation Update :

4. Event Update :

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:

ngOnInit() {
    this.formGroup = [
        {
            id:  "row1",
            label:  "",
            class:  "",
            fields: [
                {
                    type:  FormConstants.fieldType.textBox,
                    label:  "Email",
                    name:  "email",
                    attr: {
                        class:  "",
                        placeholder:  "Email",
                        display: true // Default value
                    },
                    value:  "",
                    validations: []
                },
                {
                    type:  FormConstants.fieldType.password,
                    label:  "Password",
                    name:  "password",
                    attr: {
                        class:  "",
                        placeholder:  "Password",
                        display: true // Default value
                    },
                    value:  "",
                    validations: []
                }
            ]
        }
    ];

    this._dynamicFormService.setFormFields(this.formGroup);
}

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

2. You can add divider in every rows:

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

3. In file type input return file object or also return base64decoded files using base64codedFile attributes:

this.formGroup = [
    {
        id:  "row1",
        label:  "",
        fields: [
            ...
            {
                type: FormConstants.fieldType.files,
                label: "Logo",
                name: "logo",
                attr: {
                    ...
                    base64codedFile: true
                },
                value: [],
                validations: []
            }
        ]
    }
];

4. 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:  ""
            }
        ]
    }
];

5. 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"
                }
            }
        ]
    }
];

6. 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"
                }
            }
        ]
    }
];

7. 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"
                }
            }
        ]
    }
];

8. 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"
                }
            }
        ]
    }
];

9. 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"
                }
            }
        ]
    }
];

10. You can validate form with DynamicFormService:

this._dynamicFormService.validateFormField();

11. You can return values for click event:

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

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

let changeValue = [
	{
        rowId:  'row1',
        fieldName:  'email',
        attrName:  FormConstants.attributeType.readonly,
        value:  true
    }
];

this._dynamicFormService.updateFormAttr(changeValue);

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

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

this._dynamicFormService.updateFormValue(changeValue);