如何从异步请求（表单控件）初始化 Angular 表单的默认值答案

【问题标题】：How to init default values for Angular Form from async request (form control)如何从异步请求（表单控件）初始化 Angular 表单的默认值
【发布时间】：2020-08-12 18:13:02
【问题描述】：

我的网站上有设置，我需要用默认值填充所有字段 - 我的用户的当前设置。

用户输入他的设置后，我发出一个异步 GET 请求，完成后，我需要将他的设置作为默认值传递给我的表单字段。

据我所知，我可以使用以下语法传递默认值：

this.validateForm = this.fb.group({
    language: ['default_value', [Validators.nullValidator]],
    timeZone: ['default_value', [Validators.nullValidator]],
    firstName: ['default_value', [Validators.nullValidator]],
    lastName: ['default_value', [Validators.nullValidator]],
    gender: ['default_value', [Validators.nullValidator]],
    address: ['default_value', [Validators.nullValidator]]
});

但是看，Angular 需要我在构造函数中立即初始化这个表单组，但我不能，因为异步请求需要一些时间，直到它，字段必须为空。

此外，我认为在 HTML 中执行此操作要容易得多，例如通过使用 ngModel，但它不适用于 formControl 或 [value] 但这也不是解决方案，因为表单控制只是忽略我传递给 [value] 属性的信息，并且无法将 [value] 传递给选择，因为我不仅使用常规 HTML，而且使用 Ng-Zorro 并且它没有 [value] 属性。

【问题讨论】：

标签： angular forms asynchronous rxjs angular-cli

【解决方案1】：

如果您只想在异步请求完成后更新表单的几个值。您必须使用 patchValue() 而不是 setValue()。

由于 setValue() 用于设置表单获得的所有表单控件，因此您可以使用 patchValue() 仅更新您想要的少数控件。

因此，要更新 setValue() 的完整表单，setValue() 需要所有具有相应值的控件，否则会引发如下错误：-

this.validateForm.setValue({
        language: res.language,
        timeZone: res.timeZone,
        firstName: res.firstName,
        lastName: res.lastName,
        gender: res.gender,
        address: res.address
      })

或者，如果只更新少数控件，请像这样选择 patchValue()：-

this.validateForm.patchValue({
    language: res.language,
    firstName: res.firstName
  })

【讨论】：

【解决方案2】：

您可以在使用setValue方法从您的api调用中获取值后再次设置表单的值。

示例：

   this.service.functionName().subscribe((res) => {
  this.validateForm.setValue({
    language: res.language,
    firstName: res.firstName
  })
})

【讨论】：

哦……我几乎 100% 肯定，这会有所帮助！提前谢谢你，兄弟！