使用依赖的下拉列表初始化formGroup

Question

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

基本上我有一个反应形式，具有多个相互依赖的下拉列表。

示例：

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很好。但是，使用此解决方案加载依赖于表单的组件所需的其他数据非常麻烦。

我能找到的所有信息几乎都停止了使用依赖值创建表单，但是没有说明如何更新现有数据。有人知道来源吗？

Answer 1

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

我已经创建了一个示例应用程序，并尝试结合您的方案。根据下拉更改，嵌套子属性中的源将被更改，并且值将为null。

在示例应用程序中，我考虑了这种情况，当用户更改国家/地区时，州和城市的formcontrol值应为null，并将绑定各自的来源。

这是示例图片。

工作example on stackblitz.

您不需要订阅值更改。我已引用本文来实现此目的：https://medium.com/@oojhaajay/new-way-to-validate-the-angular-reactive-form-2c4fe4f13373