时间戳

首页 > 解决方案 > 在 angular6 中更新一个 formControl 应该更新 Other ，反之亦然

angular - 在 angular6 中更新一个 formControl 应该更新 Other ，反之亦然

问题描述

我的 UI 中有 2 个选择菜单（具有相同的选项）。如果我在第一个选择菜单中选择菜单选项，那么另一个选择菜单应该反映相同的选项，反之亦然。

目前我在第一个 formControl 上使用 valueChanges 方法来更新第二个。如果我对第二个表单控件也使用相同的控件，那么我将收到“超出最大调用堆栈大小”错误。

因此，请建议当其中任何一个的值发生变化时如何更新这两个选择菜单。

代码如下所示。

使用的表单控件有：

// Form group for Simple Search
this.simpleSearchForm = this.formBuilder.group({
      orderType: [''],
      searchBy: [''],
      searchCriteria: ['']
    });

// Form Group for Advanced Search
    this.advancedSearchForm = this.formBuilder.group({
      orderType: [''],
      searchBydateField: [''],
      dateRangeFrom: [''],
      dateRangeTo: [''],
      filterResultsBy: ['']

    });

用于更改高级表单控件。

//Change in simple form should reflect the change in advanced form
    this.simpleSearchForm.get('orderType').valueChanges.subscribe(data => {
      this.advancedSearchForm.get('orderType').setValue(this.simpleSearchForm.get('orderType').value);
    });

还附上了两个选择菜单的快照。选择菜单

标签： angulartypescripttypescript2.0

解决方案

您可以使用角度change事件来更新值。

in component.ts

 changeSecondFormValue(){
    this.advancedSearchForm.controls['secondFormValue'].seValue(this.simpleSearchForm.get('firstFormValue').value)
 }

在 component.html 中

 //select 1 form Form 1
<select (change)="changeSecondFormValue()" formControlName="firstFormValue">
 <option value="1">option 1 </option>
 <option value="2">option 1 </option>
</select>

 //select 1 form Form 1
<select  formControlName="secondvalue">
 <option value="1">option 1 </option>
 <option value="2">option 1 </option>
</select>

推荐阅读