@gruppoanthea/dynamic-form v1.0.5-alpha.2
Dynamic Form
Angular Dynamic form Creator
Getting Started
Install library:
$ npm install --save @gruppoanthea/dynamic-form
add DynamicFormModule to app.module.ts
import {NgModule} from '@angular/core';
...
import {AppComponent} from './app.component';
import {DynamicFormModule} from '@gruppoanthea/dynamic-form';
@NgModule({
declarations: [AppComponent],
imports: [
...
DynamicFormModule.forRoot()
// or DynamicFormModule.forChild() for lazy loaded modules ,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {
}
and call it in app.component.ts:
import {Component, ViewChild} from '@angular/core';
import {FieldConfig, DynamicFormComponent} from '@gruppoanthea/dynamic-form';
@Component({
selector: 'app-root',
template: `
<div class="form">
<dynamic-form [fields]="regConfig" (submit)="submit($event)"></dynamic-form>
</div> `,
styles: []
})
export class AppComponent {
regConfig: FieldConfig[] = [];
@ViewChild(DynamicFormComponent) form: DynamicFormComponent;
constructor() {
window.fetch('assets/form.json', {method: 'GET'})
.then(res => res.json())
.then(res => this.regConfig = res);
}
submit(value: any) {
console.log(value);
}
}
Form Schema
the form schema can be imported locally or from Backend.
schema structure:
export interface Validator {
name: string;
validationParams?: any;
validationFunction?: any;
message: string;
}
export interface FieldConfig {
name: string;
type: string;
label?: string;
inputType?: string;
options?: string[];
collections?: any;
value?: any;
validations?: Validator[];
events?: any[];
}
example:
[
{
"type": "input", // required
"name": "name", // required
"label": "Username",
"inputType": "text",
"value": "Andrea",
"validations": [
{
"name": "required",
"message": "Name Required"
},
{
"name": "custom",
"message": "This is a custom validator"
}
]
}
]
Add Custom Field Component
you can add a custom component to populate your form.
your component MUST extends the "BaseFieldComponent" that have
field and group default variables.
you had to add [formGroup] = "group"
attribute to the firs tag of your component
in the field variable you have all form field's data.
custom-component.ts
import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-custom-component',
template: `
<div [formGroup]="group">
<label>{{field.label}}: </label>
<input [formControlName]="field.name" [placeholder]="field.label" [type]="field.inputType">
<ng-container *ngFor="let validation of field.validations;" ngProjectAs="div">
<div *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</div>
</ng-container>
</div>
`,
})
export class CustomFieldComponent extends BaseFieldComponent implements OnInit {
ngOnInit() {}
}
in order to add custom components in form schema you need to
add it to DynamicFormModule:
...
import {CustomFieldComponent} from '@gruppoanthea/dynamic-form';
const customComponents = {
'custom': CustomFieldComponent
};
@NgModule({
declarations: [
...
CustomFieldComponent
],
...
imports: [
DynamicFormModule.forRoot({customComponents}),
]
})
export class AppModule {
}
Add Custom Validator
create custom validators with createAsyncValidator
function
in order to add custom validators in form schema you need to add it to ValidatorMapper Singleton:
...
import {createAsyncValidator} from '@gruppoanthea/dynamic-form';
...
const customValidators = {
'custom': createAsyncValidator('custom', fieldValue => /^ciao$/.test(fieldValue))
};
@NgModule({
declarations: [
...
CustomFieldComponent
],
...
imports: [
DynamicFormModule.forRoot({customComponents, customValidators}),
]
})
export class AppModule {
}
custom Components and Validators can be used in form schema.
See also
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago