ngx-mat-form-model
v0.0.15
Published
Form model generator from input object. (Simple form without tabs, and form model with tabs and divs)
Downloads
27
Readme
Angular Material Form Model
Form model generator from input object. (Simple form without tabs, and form model with tabs and divs)
Try it on StackBlitz: ngx-mat-form-model DEMO
Getting started
Installation:
Install via npm package manager
ngx-mat-form-model
Prerequisites:
npm i -s @angular/flex-layout
ng add @angular/material
Usage:
Module:
Import ngx-mat-form-model
import { NgxMatFormModelModule } from 'ngx-mat-form-model';
@NgModule({
imports: [ NgxMatFormModelModule ]
})
Add ngx-mat-form-model
<ngx-mat-form-model [input]="inputObject"> </ngx-mat-form-model>
Input fields type:
Text, number, date (datepicker), boolean (checkbox)
Models:
Simple model :
export class Test3 {
getFormModel() {
return [
{ m1: { required: true, type: "text", title: "Azonosító" } },
{ m2: { required: true, type: "text", title: "Test2" } },
{ m3: { required: true, type: "number", title: "Test3" } },
{ m4: { required: true, type: "text", title: "Test4" } },
{ m5: { required: true, type: "date", title: "Azonosító" } },
{ m6: { required: true, type: "date", title: "Test6" } },
{ m7: { required: true, type: "number", title: "Test7" } },
{ m8: { required: true, type: "number", title: "Test8" } },
{ m9: { required: true, type: "number", title: "Test9" } },
{ m10: { required: true, type: "number", title: "Test10" } },
{ m11: { required: true, type: "number", title: "Test11" } },
{ m12: { required: true, type: "boolean", title: "Test12" } }
];
}
}
Complex model :
export class Test2 {
getFormModel() {
return [
{
title: "tabDefault",
sections: {
divBasic: {
m1: { required: true, type: "text", title: "Azonosító" },
m2: { required: true, type: "text", title: "Megnevezés" },
m3: { required: true, type: "number", title: "Szám" }
}
}
},
{
title: "tabBasic",
sections: {
divDates: {
m9: { required: true, type: "date", title: "Date1" },
m10: { required: true, type: "date", title: "Date2" },
m11: { required: true, type: "date", title: "Date3" },
m12: { required: true, type: "date", title: "Date4" }
},
divNumbers: {
m13: { required: true, type: "number", title: "Number1" },
m14: { required: true, type: "number", title: "Number2" },
m15: { required: true, type: "number", title: "Number3" },
m16: { required: true, type: "number", title: "Number4" }
}
}
}
];
}
}
Set Object, FormModelService
// Set Object
constructor(private dlg: MatDialog,
private ngxMatFormServ: NgxMatFormModelService
) {
this.testObj1 = new Test2();
this.testObj1.m1 = 'First';
this.testObj1.m2 = 'Second';
this.testObj2 = new Test3();
this.input = this.testObj2;
}
// Get class
getClass() {
this.ngxMatFormServ.setObj(this.input);
console.log(this.ngxMatFormServ.obj);
console.log(this.ngxMatFormServ.objPrototype);
}