0
我想創建具有角2動態HTML控制..please提出了一些很好的答案動態控制動態模型..創建在角2
這是我的組件
@Component({
selector: 'dcfield',
templateUrl: '/html/shared/dynamic-controls.html',
})
export class DynamicControlComponent implements OnInit {
@Input()
clientComboData: any[];
@Input()
form: FormGroup;
tableArray:any[];
//get isValid() { return this.form.controls[this.field.key].valid; }
constructor() {
this.clientComboData = new Array<any>()
this.clientComboData.push(new abc('Newsletter', 'Table', '0'));
this.clientComboData.push(new abc('Cross Reference', 'Text', '1'));
this.clientComboData.push(new abc('Cross2', 'Text', '1'));
this.clientComboData.push(new abc('DOB', 'Date', '0'));
this.clientComboData.push(new abc('Currency', 'Currency', '0'));
}
ngOnInit() {
console.log(this.clientComboData)
}
}
class abc
{
a: string ;
b: string ;
c: string ;
constructor(aa:string,bb:string,cc:string) {
this.a= aa;
this.b= bb;
this.c= cc;
}
}
這是我的HTML
<div class="form-horizontal">
<div class="row" *ngFor="let item of clientComboData">
<div class="col-md-6" [ngSwitch]="item.b">
<div class="form-group" *ngSwitchCase="'Table'">
<label class="col-sm-4">{{item.a}}</label>
<div class="col-sm-8 cheboxinput" >
<div class="checkbox checkbox-primary">
<input id="Newsletter" type="checkbox" checked>
<label for="Newsletter"></label>
</div>
<select data-width="auto" data-minimum-results-for-search="10" tabindex="-1" class="select2 form-control" id="">
<option>Select</option>
<option *ngFor="let opt of tableArray">{{opt.value}}</option>
</select>
</div>
</div>
<div class="form-group" *ngSwitchCase="'Text'">
<label class="col-sm-4">{{item.a}}</label>
<div class="col-sm-8">
<input type="text" class="form-control" maxlength="50" required="">
</div>
</div>
<div class="form-group" *ngSwitchCase="'Currency'">
<label class="col-sm-4">{{item.a}}</label>
<div class="col-sm-8">
<input type="text" class="form-control" maxlength="50" required="">
</div>
</div>
</div>
</div>
</div>
htmk被創建，但我想對這些打字原稿值，其方法是良好的一樣。