Question

我正在尝试将多个primeng下拉列表与反应形式一起使用，这些下拉列表共享相同的formControl实例，但是由于某些原因，当更改一个下拉列表的值时，它不会更改其他下拉列表的可见值。

这是该视图的代码：

<form [formGroup]="mainGroup">
First Select:<br/>
<p-dropdown
  [options]="options"
  formControlName="main">
</p-dropdown>
<br/>
<br/>
Second Select:<br/>
<p-dropdown
  [options]="options"
  formControlName="main">
</p-dropdown>
</form>
<br/>
<b>Actual value:</b> {{mainGroup.value.main}}

component.ts代码：

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  fb: FormBuilder = new FormBuilder

  mainGroup = this.fb.group({
    'main': []
  })

  options = [
    {label: 'First', value: 'First'},
    {label: 'Second', value: 'Second'},
    {label: 'Third', value: 'Third'}
  ]
}

还有Stackblitz

上的工作示例

周围有工作还是我缺少什么？

谢谢。

Answer 1

您必须手动设置值，它不会直接更新，如果要直接在更改时更新，则必须使用[（ngModel）]。

周围有一个错误。 bug

这里是stackblitz

将其放在构造函数中

constructor(){
    this.mainGroup.get('main').valueChanges.subscribe(value => {
      this.mainGroup.get('main').setValue(value, { onlySelf: true, emitEvent: false, 
      emitModelToViewChange: true });
    }, error => {}, () => { });
}

共享相同的formControl时，PrimeNg下拉列表不会更新其他下拉列表

1 个答案: