$3

|Method|Return type|

$3

FormText

FormNumber

FormDropDown

FormColor

FormRange

Usage

> 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 component
> app.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' component
> app.component.html
`angular2html

`
4) Done, the form will be automatically created on the page

!alt text

Using custom templates

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"
>