@high-lab/dynamic-form
v0.3.19
Published
An angular 10+ module that allows to generate forms by config
Downloads
141
Readme
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
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
...
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
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
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
<ng-container *dynamicFormContent="self" [formGroup]="formGroup">
<mat-checkbox class="checkbox" color="primary" [formControlName]="fieldConfig.key">{{label}}</mat-checkbox>
</ng-container>
Step 3: Use in your app
<dynamic-form [form]="form">
<div class="action-buttons" formFooter>
<button mat-stroked-button (click)="skipChanges()" [disabled]="!form.isChangedByUser || null">Cancel</button>
<button mat-raised-button color="primary" (click)="save($event)" [disabled]="!form.isChangedByUser || null">Save</button>
</div>
</dynamic-form>
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,
})
]
}),
]
}]
})
];