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(''),
      account_ids: this.formBuilder.array([])         
    }
    this.userFrm = this.formBuilder.group(obj);
  }

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

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

使用以下代码将选定的帐户ID发送到后端。

onChange(account_id:string, isChecked: boolean) {
    const accountIdArray = <FormArray>this.userFrm.controls.account_ids;

    if(isChecked) {
      accountIdArray.push(new FormControl(account_id));
    } else {
      let index = accountIdArray.controls.findIndex(x => x.value == account_id)
      accountIdArray.removeAt(index);
    }

    console.log(this.userFrm.getRawValue());
  }

现在，我需要在编辑页面上预先填充帐户ID（formArray）。

模板如下。

<div *ngFor="let account of accounts">
              <input type="checkbox" (change)="onChange(account.id, $event.target.checked)">{{account.id}}  {{account.acc_name}}<br>
            </div>

关于如何实现这一目标的任何想法？

Answer 1

您的初始化很好。在我必须在编辑页面上预先填充FormArray的情况下，这是我的工作方式：

items: FormArray;

//response from server
response['data'].map((item, index) => {

    const tmpDict = {};
    tmpDict['firstname'] = new FormControl(item.firstname);
    tmpDict['lastname'] = new FormControl(item.lastname);
    tmpDict['email'] = new FormControl(item.email);

   this.items = this.userFrm.get('items') as FormArray;
   this.items.push(new FormGroup(tmpDict));
})

在编辑页面上预先填充formArray-Angular4

1 个答案: