mdv-dynamic-form
v1.0.2
Published
* Install following
Downloads
5
Readme
MDV-Dynamic-Form
Install following
ng add @angular/material @angular/cdk npm install --save @angular/material-moment-adapter moment
Import
DynamicFormModule
inapp.module.ts
.import { DynamicFormModule } from 'dynamic-form';
and add into imports
@NgModule({ declarations: [ ... ], imports: [ ... DynamicFormModule ] })
Now you are good to go
For use in any component
Add
mdv-dynamic-form
in .html file<mdv-dynamic-form [fields]="regConfig" (submit)="submit($event)"></mdv-dynamic-form>
And .ts file is look like this
import { Component, ViewChild } from '@angular/core'; import { DynamicFormComponent, FieldConfig } from 'dynamic-form'; import { Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'mdv-dynamic-form'; @ViewChild(DynamicFormComponent) form: DynamicFormComponent; regConfig: 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" } ]; submit(value) { console.log(value) } }
Add this in style.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; body { margin: 10px; } .demo-full-width { width: 100%; } .margin-top { margin-top: 15px; } .margin-left { margin-left: 10px; } .radio-label-padding { padding-right: 10px; color: grey; } .form { margin-left: 10px; border: 2px solid lightgray; width: 600px; padding-left: 5px; margin-top: 10px; }
Thats it.