使用依赖下拉列表初始化窗体组

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

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); . 这不会触发值更改,所以我必须添加 startWith() .

如果这些下拉列表在表单阵列中,或者表单变得更复杂,那么很快就会失控。

我能找到的所有信息几乎都停留在创建具有依赖值的表单上,但没有解释如何更新现有数据。有人知道消息来源吗?