从数组构建表单控件-Angular 4

Question

我有一个使用form builder构建的angular4表单。代码如下。

initializeFromControls() {
    let obj = {
      firstname: new FormControl('', ),
      lastname: new FormControl('', ),
      email: new FormControl('',
              [Validators.required,
              Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")]),
      status: new FormControl('', ),
      role_id: new FormControl('')         
    }
    this.userFrm = this.formBuilder.group(obj);
  }

现在我有另一个名为account_ids的字段，它是一个数组。帐户ID是通过getAccounts api调用获取的。

ngOnInit() {
    this.initializeFromControls();
    this.getAccounts();
  }

对于每个帐户，我需要显示一个复选框和帐户名。所选帐户将以以下格式发送 account_ids: [1,2,3]

如何使用FormBuilder实现此目的。

Answer 1

在obj的初始化中添加：

let obj = {
  ...
  accounts: this.formBuilder.array([])
  ...
}

然后，在获得account_ids后，输入：

account_ids.forEach(acc_id => {
  this.userFrm.get('accounts').push(
    FormControl(acc_id)
  )
}

但是请记住，在这种情况下，帐户“ 1”将位于this.userFrm.get('accounts')中的位置0。