Angular 6 dynamic forms module
Requires angular-material to work [https://material.angular.io/]
Simply import the module into your app.module.ts
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { DynamicFormModule } from './modules/dynamic-form/dynamic-form.module';
import { RoutingModule } from './routing.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
RoutingModule,
BrowserAnimationsModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
DynamicFormModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Then in your template use the component as follows
<app-dynamic-form [fields]="fields" (submit)="submit($event)"></app-dynamic-form>
And configure the fields on your component
fields: FieldConfig[] = [
{
type: 'input',
label: 'Username',
inputType: 'text',
name: 'name',
validations: [
{
name: 'required',
validator: Validators.required,
message: 'Name Required'
},
{
name: 'pattern',
validator: Validators.pattern('^[a-zA-Z]+$'),
message: 'Accept only text'
}
]
},
{
type: 'input',
label: 'Email Address',
inputType: 'email',
name: 'email',
validations: [
{
name: 'required',
validator: Validators.required,
message: 'Email Required'
},
{
name: 'pattern',
validator: Validators.pattern(
'^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$'
),
message: 'Invalid email'
}
]
},
{
type: 'input',
label: 'Password',
inputType: 'password',
name: 'password',
validations: [
{
name: 'required',
validator: Validators.required,
message: 'Password Required'
}
]
},
{
type: 'radiobutton',
label: 'Gender',
name: 'gender',
options: ['Male', 'Female'],
value: 'Male'
},
{
type: 'date',
label: 'DOB',
name: 'dob',
validations: [
{
name: 'required',
validator: Validators.required,
message: 'Date of Birth Required'
}
]
},
{
type: 'select',
label: 'Country',
name: 'country',
value: 'UK',
options: ['India', 'UAE', 'UK', 'US']
},
{
type: 'checkbox',
label: 'Accept Terms',
name: 'term',
value: true
},
{
type: 'button',
label: 'Save'
}
];