PrimeNg dropdowns not updating other dropdowns when sharing same formControl

Question

I'm trying to use multiple primeng dropdowns with reactive forms, these dropdowns share the same formControl instance, but for some reason when changing the value of one dropdown it doesn't change the visible value of the other ones.

Here is my code for the view:

<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}}

The component.ts code:

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'}
  ]
}

And a working sample on Stackblitz

Is there a work around or am I missing something?

Thanks.

score 0 · Answer 1 · answered Nov 12 '19 at 04:41

You have to manually set the values, it will not update directly, if you want to update directly on change, you have to use [(ngModel)].

There is a bug around it. bug

Here is the stackblitz

Put this in constructor

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

PrimeNg dropdowns not updating other dropdowns when sharing same formControl

1 Answers1