更新angular6中的一个formControl应该更新Other，反之亦然

Question

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

还附加了两个“选择”菜单的快照。

Answer 1

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

Answer 2

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

例如：我使用了Primeng，所以我需要在选择菜单上使用（onChange）事件。

常规和首选选择的代码

普通

以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);
}

对于吴总理

以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);
}