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
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:
;
2. Create a FormGroup
via DynamicFormService
:
;
3. Add a DynamicFormComponent
:
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 | 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
2. You can add divider in every rows:
this.formGroup = ;
3. You can relate one or more fields with conditional values:
this.formGroup = ;
4. You can click this button then validate value and return form values:
this.formGroup = ;
5. You can click this button then return form values without validate value:
this.formGroup = ;
6. You can click this button then return reactive form object:
this.formGroup = ;
7. You can click this button then return fields form JSON object:
this.formGroup = ;
8. You can click this button then reset form values:
this.formGroup = ;
9. You can validate form with DynamicFormService
:
this._dynamicFormService.validateFormField;
10. You can return values for click event:
submitEventevent
11. You can now easily modify your form attributes with DynamicFormService
:
; this._dynamicFormService.updateFormAttrchangeAttrValue;
12. You can now easily modify your form values with DynamicFormService
:
; this._dynamicFormService.updateFormValuechangeValue;