ng2-dynamic-vform v1.0.1
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.
` <vform template="formTemplate">
<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.