Abstract layer to easily generate Dynamic Forms for Angular
npm install @myndpm/dyn-formsAbstract layer to easily generate Dynamic Forms for Angular.
With this library we are able to dynamically create the Form Controls hierarchy from a Configuration Object, which is comprised of nested configuration objects which corresponds one-to-one with form controls.
The documentation is available at mynd.dev/docs/dyn-forms.
A general introduction is presented in this article, the big picture is shown in this Prezintation, you can play with live code in this StackBlitz and you can join us on Discord.
Technical packages and sequence diagrams are also available.
Add this library to your Angular project:
``bash`
npm install @myndpm/dyn-forms
and import a ui-package to provide controls like the Dynamic-Forms-Material module:
`typescript
import { DynFormsMaterialModule } from '@myndpm/dyn-forms/ui-material';
@NgModule({
imports: [
DynFormsMaterialModule.forFeature(),
`
you also can provide your own DynControls (explained later):
`typescript
import { DynFormsModule } from '@myndpm/dyn-forms';
@NgModule({
imports: [
DynFormsModule.forFeature({
controls: [
SelectComponent, // 'MYSELECT'
InputComponent, // 'MYINPUT'
],
}),
`
where SelectComponent
and InputComponent
are already implemented in DynFormsMaterialModule.
Then with the provided controls you could use them in a Form Configuration like this:
`typescript
export class MyFormComponent {
form = new FormGroup({});
config: DynFormConfig = {
controls: [
{
control: 'MYSELECT',
name: 'option',
params: {
label: 'Pick an Option',
options: [
{ value: 'Option 1', key: 1 },
{ value: 'Option 2', key: 2 },
],
},
},
{
control: 'MYINPUT',
name: 'quantity',
validators: [Validators.required],
params: {
label: 'Quantity',
type: 'number',
},
},
];
}
}
`
and pass them to the dyn-form component in its template:
`html`
and that's it!
now you can customize the styles and build some custom controls.
The DynFormsMaterialModule provides a typed _Factory Method_ to easily create
the config objects corresponding to its DynControls; for example:
`typescript
import { createMatConfig } from '@myndpm/dyn-forms/ui-material';
export class MyFormComponent {
config: DynFormConfig = {
controls: [
createMatConfig('CARD', {
name: 'group',
params: { title: 'My Card' },
controls: [
createMatConfig('INPUT', {
name: 'firstName',
validators: [Validators.required],
params: { label: 'First Name' },
}),
createMatConfig('INPUT', {
name: 'lastName',
validators: [Validators.required],
params: { label: 'Last Name' },
}),
],
}),
]
};
}
`
This factory will warn you if the provided config object doesn't correspond to the ControlType.
A Dynamic Control is an Angular component that has a static dynControl field which acts as an unique ID.
We can reference any component from the configuration object with this ID.
While creating a new form the library recursively instantiates these Dynamic Controls components, and populates their core fields:
1. Its corresponding config,params
2. any values specified in the config,control
3. the corresponding instance (FormControl, FormGroup or FormArray).
From there, we have the required tools for the component to provide any functionality.
You can check out the example source code of @myndpm/dyn-forms/ui-material.
Basically your custom controls need to extend the respective Abstract Dynamic Control
(DynFormControl, DynFormArray, DynFormGroup or DynFormContainer) which register the corresponding Form Control into the hierarchy specified in the nested Config Object.
You just need to implement static dynControl property which is the unique place where you define your control identificator,completeParams
and the method, which is useful to ensure that any partially configured parameters will have the required fields and the template won't be broken.super.ngOnInit()
Also, if you implement OnInit or AfterViewInit be sure to call the base class too, with and super.AfterViewInit() respectively.
As mentioned in the Installation section, you can provide your controls with the useful
DynFormsModule.forFeature({ providers, controls })` to avoid boilerplate.
Please share your experience and ideas!
Impressions, sugestions, improvements, use cases that you've implemented or your company needs, everything is welcome in the GitHub Discussions.
As usual, please report any Issue
or request a Feature.
Enjoy!
− Mynd.co Frontend Engineering