angular form set dynamic control(form动态设置control)

实现效果

form表单控件的实时更新 效果如图

关键代码

validateForm: FormGroup; // 表单校验 constructor( private fb: FormBuilder ) { this.validateForm = this.fb.group({ }); } // 这里有一个控件数组，包含控件的显示名称、属性名和控件类型 this.properties=[ {nameChain:'account',controlType:0,displayName:'账号'}, {nameChain:'password',controlType:1,displayName:'密码'}, ]; // 先清理之前的控件 this.validateForm.clearValidators(); this.properties.forEach(property => { // 根据新控件数组，插入控件 this.validateForm.addControl(property.nameChain, this.fb.control(null, Validators.required)); });

前端循环properties，填充控件即可

<form nz-form [formGroup]="validateForm"> <nz-form-item *ngFor="let property of properties"> <nz-form-label [nzSm]="2" [nzXs]="2" nzRequired>{{property.displayName}}</nz-form-label> <!--输入框--> <nz-form-control [nzSm]="4" [nzXs]="4" *ngIf="property.controlType==0"> <input nz-input [formControlName]="property.nameChain" type="text" class="form-control" name="{{property.nameChain}}" [(ngModel)]="dataObj[property.nameChain]"> </nz-form-control> <!--密码框--> <nz-form-control [nzSm]="4" [nzXs]="4" *ngIf="property.controlType==1"> <input nz-input type="password" [formControlName]="property.nameChain" class="form-control" name="{{property.nameChain}}" [(ngModel)]="dataObj[property.nameChain]"> </nz-form-control> <!--下拉框--> <nz-form-control [nzSm]="4" [nzXs]="4" *ngIf="property.controlType==2"> <nz-select [(ngModel)]="dataObj[property.nameChain]" class="form-control" name="modules" [formControlName]="property.nameChain"> <nz-option *ngFor="let city of cities" [nzValue]="city.id" [nzLabel]="city.name"> </nz-option> </nz-select> </nz-form-control> </nz-form-item> </form>

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Website/DotNetCore/CoreNgAlain/src/app/routes/form-set-dynamic-control

参考资料

https://stackoverflow.com/questions/36627573/angular2-form-controlgroup-who-hold-an-undefined-number-of-control/36641967#36641967

转载于:https://www.cnblogs.com/Lulus/p/9497872.html