This library generates Angular `FormGroup` and related DOM from a specified JSON configuration.
npm install @elemental-concept/dynamic-formThis library generates Angular FormGroup and related DOM from a specified JSON configuration. Such configuration can
either be baked in into the application or received dynamically from back-end. Exact form input fields are NOT part of
the library and must be provided by a library user. A set of Material based input components can be found in
Material Components For Dynamic Form
.Dynamic Form 1.x is only compatible with Angular v13 v14 and v15.
Future releases from the 16.0.0 are directly linked to the correspondent Angular version.
Install the library through NPM:
``shell`
$ npm i @elemental-concept/dynamic-form
DynamicFormModule should be included into your Angular modules automatically by IDE. If your IDE doesn't support such
functionality, don't forget to add it manually:
`typescript
import { DynamicFormModule } from '@elemental-concept/dynamic-form';
@NgModule({
imports: [
DynamicFormModule
]
})
class SomeModule {
}
`
The library provides DynamicFormComponent and DynamicFormFactoryService to generate forms in run-time. In mostDynamicFormComponent
cases should be used directly. DynamicFormFactoryService can be used to create a completely
custom solution when supplied component is not enough.
DynamicFormComponent expects form configuration, form value and optional input component mapping. Form configurationFormGroup
describes all fields, their labels, validations, etc in a simple format. Value is a regular key-value map as used
by . DynamicFormComponent also provides a set of events for application to react to data and state changes.
Additionally, custom HTML can be placed inside the form if needed.
`angular2html`
`typescript
// my-form.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-form',
templateUrl: './my-form.component.html',
styleUrls: [ './my-form.component.scss' ]
})
export class MyFormComponent {
config = {
elements: [
{
id: 'firstName',
label: 'First name',
type: 'string',
validators: [ { type: 'required' } ]
},
{
id: 'lastName',
label: 'Last name',
type: 'string',
validators: [ { type: 'required' } ]
}
]
};
value = {
firstName: 'John',
lastName: 'Doe'
};
}
`
DynamicFormComponent has 4 content slots which can be used to annotate and decorate the form according to the design.
One of these slots should also contain submit button if required. Slots are specified by CSS classes:
- before-form - content will be placed befor