使用 FormBuilder 从 Angular 2 中的异步调用设置默认表单对象值

Question

我正在使用 "@angular/forms": "~2.1.0" 和 "angular-cli": "1.0.0-beta.19-3" 并尝试设置我的 FormGroup 的 (campaignForm) campaign_config_id 属性的默认值在我进行异步调用以获取 campaignConfigs.

列表之后

我已经尝试按照另一个 SO 建议使用以下内容，但我得到了 TypeError: _this.campaignForm.controls.campaign_config_id.updateValue is not a function。

this.campaignConfigService.getCampaignConfigs()
  .subscribe(
    campaignConfigs => {
      ...
      this.campaignForm.controls['campaign_config_id'].updateValue(campaignConfigs[0].id)
    }
  );

我也尝试过将 this.campaignForm.controls['campaign_config_id'] 转换为 NgControl、FormControl、SelectControlValueAccessor 和其他对象，但其中 none 有一个 .updateValue函数。

关于如何最好地做到这一点有什么建议吗？

Answer 1

updateValue() 已弃用。对所有类型的表单控件使用 setValue()。

Answer 2

我认为处理表单最灵活的方法是使用 "ReactiveForms" 并使用 FormBuilder class 创建表单。

请研究反应形式和 FormGroup/FormBuilder 最后你可以做这样的事情：this.form.controls['campaign_config_id'].setValue(yourIdValue)

使用 FormBuilder 从 Angular 2 中的异步调用设置默认表单对象值

Setting default form object value from async call in Angular 2 using FormBuilder

angular

angular2-formbuilder