Angular Dynamic Form

An angular 10+ module that allows to generate forms by config


Demo

http://high-lab.com.ua/dynamic-form

Usage

Step 1: Install @high-lab/dynamic-form

``sh
npm install @high-lab/dynamic-form --save
`

Step 2: Import angular dynamic form module into your app module,
provide default validation messages,
and your custom components for each config type

`ts
...
import { DynamicFormModule } from '@high-lab/dynamic-form';
...

import { DynamicFormConfig } from '@high-lab/dynamic-form';
import {
FormGroupField,
FormGroupFieldComponent,
CheckboxField,
CheckboxFieldComponent,
NumberField,
NumberFieldComponent,
TextField,
TextFieldComponent,
...
} from './fields';

export const MY_DYNAMIC_FORM_CONFIG: DynamicFormConfig = [
{ component: FormGroupFieldComponent, config: FormGroupField },
{ component: CheckboxFieldComponent, config: CheckboxField },
{ component: NumberFieldComponent, config: NumberField },
{ component: TextFieldComponent, config: TextField },
...
];

export function VALIDATION_MESSAGES() {
return {
required: 'This field can’t be blank.',
min: params => Value must be greater than ${params.min},
...
};
}

@NgModule({
...
imports: [
...
DynamicFormModule.config(MY_DYNAMIC_FORM_CONFIG, VALIDATION_MESSAGES),
],
...
})
export class AppModule { }
`

Example of config: All your config must extend `AbstractField` or `ControlField` class

`ts
import { ControlField, ControlFieldInterface } from '@high-lab/dynamic-form';

export type CheckboxFieldInterface = ControlFieldInterface;

export class CheckboxField extends ControlField {
public static readonly type = 'checkbox';

constructor(options: CheckboxFieldInterface) {
super(options);
}
}
`

Example of control: All your control components must extend `BaseFieldComponent` class

`ts
import { Component, Input } from '@angular/core';
import { BaseFieldComponent } from '@high-lab/dynamic-form';
import { CheckboxField } from './checkbox-field';

@Component({
selector: 'checkbox-field',
templateUrl: './checkbox-field.component.html',
styleUrls: ['./checkbox-field.component.scss']
})
export class CheckboxFieldComponent extends BaseFieldComponent {
@Input()
public readonly fieldConfig: CheckboxField;
}
`
checkbox-field template

`html

{{label}}


`

Step 3: Use in your app

`html





`

`ts
import { createDynamicForm, ExtendedFormGroup } from '@high-lab/dynamic-form';

export class SomeComponent implements OnChanges, OnDestroy {
public form: ExtendedFormGroup;

constructor() {
this.form = createDynamicForm(SOME_FORM(someConfig));
}
}

export const SOME_FORM = (someConfig: any): AbstractField[] => [
...
new NumberField({
key: 'age',
label: Age,
order: 1,
min: 12,
max: 150,
initialValue: { value: '', disabled: someConfig.ageDisabled },
validatorOrOpts: [Validators.min(0), Validators.max(150)],
relatedFields: [{
checkVisibility: (value, formValue) => value >= 18,
configs: [
new TextField({
key: 'someKey',
label: Some Label,
order: 2,
}),
]
} , {
checkVisibility: (value, formValue) => value >= 60,
configs: [
new TextField({
key: 'someKey',
label: Some Label 2,
order: 2,
}),
new FormGroupField({
key: 'size',
order: 3,
configs: [
new NumberField({
key: 'width',
label: Width,
initialValue: 30,
}),
new NumberField({
key: 'height',
label: Height,
initialValue: 30,
})
]
}),
]
}]
})
];
``

License

MIT