angular-reactive-dynamic-forms
v3.0.7
Published
angular-reactive-dynamic-forms
Downloads
58
Maintainers
praveenkanchanReadme
angular-reactive-dynamic-forms
See DEMO
Table of Contents
Getting Started
1. Install the core package:
npm i angular-reactive-dynamic-forms --save2. 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-forms2. Install the dependencies:
npm i3. Run the application:
npm startBasic 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: "[email protected]"
}
];
this._dynamicFormService.updateFormValue(changeValue);