初始化formGroup与根据下拉框

Posted 2023-02-16

我有一个解决，工作问题，但它现在太复杂了，所以我在寻找一个简单的解决方案。

基本上我有与依赖于彼此的多个下拉菜单的反应性形式。

例：

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与依赖值是罚款。但加载额外的数据是，根据形式的组件需要，是该解决方案的巨大的痛苦。

所有的信息，我可以创造与价值观不同的形式找到几乎停止，但不解释你将如何更新现有数据。有谁知道一个来源？

答案

我正面临着在我的项目同样的问题。我已经使用rxweb验证框架的基础装饰验证方法。

我创建了一个示例应用程序，并尝试结合您的情况。基于下拉变化源将被改变和值将在嵌套子属性空。

在示例应用程序我已经考虑了场景中，当用户改变这个国家，然后国家和城市formcontrol值应为空，相应的源将被绑定。

下面是示例的图像。

工作example on stackblitz.

你并不需要订阅的valuechanges。我已经refered这篇文章来实现这一目标：https://medium.com/@oojhaajay/new-way-to-validate-the-angular-reactive-form-2c4fe4f13373