ng2里表单Input采取数据双向绑定问题？

Question

问题：
采用ngFor循环创建表单并给input双向绑定，组件中如何动态创建对应的FormControl

代码：

UI组件使用的是 ng-zorro

模板部分：

<form nz-form [nzType]="'horizontal'" [formGroup]="defaultForm">
    <div nz-f
    orm-item nz-row *ngFor="let user of authorityList; let i = index">
        <div nz-form-label nz-col [nzSpan]="4">
        </div>
        <div nz-form-control nz-col [nzSpan]="6" [nzValidateStatus]="'success'" nzHasFeedback>
            <nz-input [ngModel]="user" [nzSize]="'large'" [formControlName]="user">
            </nz-input>
        </div>
    </div>
</form>

组件部分

public defaultForm: FormGroup;
public authorityList: any;

ngOnInit() {
    this.authorityList = ['lomo', 'lomoa'];
    //需要给每个input的name创建FormControl, 如何动态化？
    this.defaultForm = new FormGroup({
      lomo: new FormControl(),
      lomoa: new FormControl(),
    });
}

_submitForm() {
    console.log(this.defaultForm.value);
}

这个authorityList是动态变化的，如何动态给defaultForm创建FormControl.

或，有没有其它更好的办法解决动态创建的表单input数据双向绑定问题？

谢谢。

Answer 1

既然你的Form表单是动态变化的，所以你就不能使用TemplateDriven Form这种方式了。
所以你应该使用ReactiveForm。

大致的思想就是你需要有一个container component, 将需要绑定formControl的input抽出来变成childwidget, childwidget两个输入参数user和fmgrp。

 <div nz-row *ngFor="let user of authorityList; let i = index">
     <div nz-col [nzSpan]="4">
     </div>
     <div nz-col [nzSpan]="6" [nzValidateStatus]="'success'" nzHasFeedback>
         <childwidget [user]="user" [fmgrp]="defaultForm"></childwidget>
     </div>
 </div>

ngOnInit() { 
    this.defaultForm = new FormGroup({});
}

所以childwidget就变成这样了

@Component({
    selector: 'childwidget',
    template: `
         <nz-input [formControl]="formCtrl">
         </nz-input>
    `
});

@Input() user: string;
@Input() fmgrp: FormGroup;
formCtrol: FormControl = new FormControl("");

ngOnInit() {
  if (this.fmgrp) {
     this.fmgrp.addControl(this.user, this.formControl);
  }
}

这样无论你有多少个input，formGroup都能添加对应额formControl。
然后你操作这个defaultForm这个变量就可以了。