初始化formGroup与根据下拉框

问题描述 投票:0回答:1

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

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

例:

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

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

angular angular-reactive-forms angular-formbuilder
1个回答
0
投票

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

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

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

下面是示例的图像。

enter image description here

工作example on stackblitz.

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

© www.soinside.com 2019 - 2024. All rights reserved.