使用依赖的下拉菜单初始化 formGroup答案

【问题标题】：Initialize formGroup with depending Dropdowns使用依赖的下拉菜单初始化 formGroup
【发布时间】：2019-02-04 18:07:02
【问题描述】：

我有一个问题已经解决并且可以解决，但是现在它太复杂了，所以我正在寻找一个更简单的解决方案。

基本上，我有一个反应式表单，其中包含多个相互依赖的下拉菜单。

例子：

myFormGroup = formBuilder.group({
  Dropdown1: [''],
  Dropdown2: [''], // selection values depend on Dropdown 1
  Dropdown3: [''], // selection values depend on Dropdown 2
});

创建 formGroup 后，我从服务加载 Dropdown1 的可能值，同时订阅 Dropdown1 的 valueChanges。

例子：

loadDropdown1() {
  this.myService.getDropdown1Values().subscribe(
    values => {
      .. // save to local var
      this.subscribeDropdown1Change();
    }
  );
}

subscribeDropdown1Change() {
  this.myFormGroup.controls.Dropdown1.valueChanges
  .pipe(
     // see: https://github.com/angular/angular/issues/15282
     startWith(this.myFormGroup.controls.Dropdown1.value)
   )
   .subscribe(
     selectedValue => this.loadDropdown2(selectedValue)
  )
}

... and so on

这会在第一个下拉列表更改后立即为我提供第二个下拉列表中的正确值。要使用现有值初始化表单，我使用 myFormGroup.patchValue(formData); 之类的东西。这不会触发 valueChange，所以我必须添加 startWith()。

现在，例如，如果第一个下拉菜单发生更改，您必须重置相关下拉菜单的值，这也需要额外的逻辑，因为它不应该在初始 valueChange 时重置。

如果这些下拉菜单在 FormArray 内，或者如果表单变得更复杂，这很快就会失控。

所以我想知道的是，是否有更简单的方法来处理这个问题。用依赖值初始化一个 formGroup 很好。但是加载依赖表单组件所需的额外数据，对于这个解决方案来说是一个巨大的痛苦。

我可以找到的所有信息几乎都停止了创建具有依赖值的表单，但没有解释如何更新现有数据。有人知道来源吗？

【问题讨论】：

这可能更适合codereview.stackexchange.com。 SO 是关于修复损坏的代码。

标签： angular angular-reactive-forms angular-formbuilder

【解决方案1】：

我在项目中遇到了同样的问题。我使用了 rxweb 验证框架的基于装饰器的验证方法。

我已经创建了一个示例应用程序并尝试将您的场景纳入其中。根据下拉列表更改源将被更改，并且嵌套子属性中的值将为 null。

在我考虑过的示例应用程序中，当用户更改国家/地区时，州和城市的表单控件值应为空，并且将绑定相应的源。

这是示例图片。

工作example on stackblitz.

您不需要订阅值更改。我已经参考了这篇文章来实现这一点：https://medium.com/@oojhaajay/new-way-to-validate-the-angular-reactive-form-2c4fe4f13373

【讨论】：