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);

  }