Ng2DynamicVform

Dynamic-forms for Angular 2.

Installation

Run npm install ng2-dynamic-vform for install.

Usage

import { VForm } from 'ng2-dynamic-vform';

@NgModule({ declarations: [ AppComponent, VForm ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Development Hints

export class AppComponent { title = 'Angular 2 Dynamic Form'; private formTemplate: Object;

constructor() { this.formTemplate = [ { DataType:4, PropertyName:"Mandatory TextBox", Placeholder:"Enter Mandatory TextBox", IsMandatory:true, Lookups:[], Value:"" },

   {
    DataType:11,
    PropertyName:"Date Picker",
    Placeholder:"",
    IsMandatory:true,
    Lookups:[],
    Value:""
  }
  ,
   {
    DataType:7,
    PropertyName:"DropDown",
    Placeholder:"",
    IsMandatory:true,
    Lookups:[{
      Name:"Options1",
      PropertyName:'',
    },
    {
      Name:"Options2",
      PropertyName:'',
    },
    {
      Name:"Options3",
      PropertyName:'',
    }],
    Value:""
  },
   {
    DataType:0,
    PropertyName:"CheckBox",
    Placeholder:"",
    IsMandatory:true,
    Lookups:[],
    Value:""
  }
  ,
   {
    DataType:6,
    PropertyName:"Text Area",
    Placeholder:"Enter Text Area",
    IsMandatory:true,
    Lookups:[],
    Value:""
  }
  ,
   {
    DataType:1,
    PropertyName:"Number",
    Placeholder:"Enter Only Numeric Value",
    IsMandatory:true,
    Lookups:[],
    Value:""
  }
   ,
   {
    DataType:3,
    PropertyName:"Email",
    Placeholder:"Enter Email",
    IsMandatory:true,
    Lookups:[],
    Value:""
  },
   {
    DataType:4,
    PropertyName:"Non Mandatory TextBox",
    Placeholder:"Enter Non-Mandatory TextBox",
    IsMandatory:false,
    Lookups:[],
    Value:""
  }
];

} }

View.

<form> <vform [template]="formTemplate"></vform> <div class="form-group row"> <div class="col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-danger">Reset</button> </div> </div> </form>

For Demo, Clone & Run

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.