Module for creating dynamic FormControls based on FormGroup
npm install es-dynamic-formThis library was generated with Angular CLI version 9.1.13.
import { DynamicFormModule } from 'dynamic-form'selector: string or number or boolean | value for the input field |string or number | key in the FormGroup |string or number | label for the input field |string | the type of FormControl used |boolean | is the field required |any | container for user settings | _others_ | any | inherited from FormControl ||Method|Return type|
FormText
FormNumber
FormDropDown
FormColor
FormRange
DynamicFormModule in your app module. import { DynamicFormModule } from 'es-dynamic-form' > app.module.ts
``typescript
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DynamicFormModule} from 'es-dynamic-form';
@NgModule({
declarations: [
AppComponent,
],
imports: [
CommonModule,
BrowserAnimationsModule,
BrowserModule,
ReactiveFormsModule,
FormsModule,
DynamicFormModule,
],
entryComponents: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
`
2) Create your FormGroup in parent componentapp.component.ts
>
` typescript
import {DynamicFormBuilder, FormColor, FormDropDown, FormNumber, FormText, IFormChangeEvent} from 'es-dynamic-form';
export class AppComponent implements OnInit {
private readonly cars = [
{label: 'Audi', value: 'Audi'},
{label: 'BMW', value: 'BMW'},
{label: 'Fiat', value: 'Fiat'},
];
public fg: FormGroup;
constructor() {
}
ngOnInit() {
this.fg = new FormGroup({
checkbox: new FormText({value: true, key: 'checkbox', label: 'checkbox'}),
text: new FormText({value: 'simple text', key: 'text', label: 'insert text'}),
drop: new FormDropDown({
value: this.cars[0].value, key: 'drop', label: 'cars list', options: {items: this.cars}
}),
arrayNumber: new FormArray([
new FormNumber({value: 1, key: 0, label: 'number 1'}, Validators.min(0)),
new FormNumber({value: 2, key: 1, label: 'number 2'}, Validators.min(0)),
new FormNumber({value: 3, key: 2, label: 'number 3'}, Validators.min(0)),
]),
color: new FormColor({value: '#fff222', key: 'color', label: 'choose color'}),
});
}
}
`
3) Add the created FormGroup to the 'dynamic-form' componentapp.component.html
> `angular2html`
4) Done, the form will be automatically created on the page
angular2html
`The context passed to has the following structure
`typescript
"context" : {
$implicit: question ,
fg: formGroup
}
`
> question - FormControl for the current template
>
> fg - the FormGroup that the question belongs to##### Let's say we want to use the p-checkbox from PrimeNG. The replacement template will look like this
`angular2html
[FormGroupList]="fg"
[submitButton]="true"
>
[formControlName]="control.key"
[binary]="true"
[label]="'primeng checkbox'"
>
`
!alt text
##### If you want to use 1 template for several FormControls, it is enough to specify the replaced template types in the questTemplate array separated by commas
`angular2html
My custom template for {{formcontrol.controlType}}
``