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:

`typescript
import { DynamicFormControllerModule } from "angular-reactive-dynamic-forms";

@NgModule({

imports: [
...
DynamicFormControllerModule
]
});

export class AppModule {}
`




2. Create a FormGroup via DynamicFormService:

`typescript
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 :

`html

`

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:

`typescript
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);
}
`

`html

`

2. You can add divider in every rows:

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


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

`typescript
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:

`typescript
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:

`typescript
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:

`typescript
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:

`typescript
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:

`typescript
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:

`typescript
this._dynamicFormService.validateFormField();
`


10. You can return values for click event:

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

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

`typescript
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:

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

this._dynamicFormService.updateFormValue(changeValue);
``