0

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

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

例子：

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 很好。但是加载依赖表单组件需要的额外数据，对于这个解决方案来说是一个巨大的痛苦。

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

4

1 回答 1

0

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

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

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

这是示例的图像。

在此处输入图像描述

stackblitz 上的工作示例。

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

于 2019-02-04T10:07:02.613 回答