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

【问题标题】：Updating one formControl in angular6 should update Other and vice versa在 angular6 中更新一个 formControl 应该更新 Other ，反之亦然
【发布时间】：2019-04-04 07:14:22
【问题描述】：

我的 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);
    });

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

【问题讨论】：

标签： angular typescript typescript2.0

【解决方案1】：

您可以使用 angular 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>

【讨论】：

感谢您的更新。我忘记的一件事是我正在使用primeng下拉（p-dropdown），所以我使用了（onChange）事件。

【解决方案2】：

Normal Select 用于菜单，然后（更改）事件将起作用。如果除了普通选择之外，如果使用了其他第三方的任何其他选择菜单，那么根据第三方我们需要绑定选择菜单以进行更改。

例如：我使用了 Primeng，所以我需要为选择菜单使用 (onChange) 事件。

正常和prime ng选择的代码

正常

在html中

<select (change)="changeSecondFormValue()" formControlName="orderType">
<option value="1">option 1 </option>
 <option value="2">option 1 </option>
</select>

在组件中

changeSecondFormValue(): void {
 this.simpleSearchForm.get('orderType').setValue(this.advancedSearchForm.get('orderType').value);
}

对于 Prime 吴

在 HTML 中

<p-dropdown name="orderType" id="orderType" [options]="orderTypes"
                      formControlName="orderType" optionLabel="orderTypeName"
                      (onChange) = "changeValueFromAdvanced()"></p-dropdown>

在组件中

changeValueFromAdvanced() {
    this.advancedSearchForm.get('orderType').setValue(this.simpleSearchForm.get('orderType').value);
}

【讨论】：