Search code examples
htmlangularangular-reactive-formsprimengp-dropdown

PrimeNG p-dropdown [disabled] does not appear to work in PrimeNG 17.18.x


I noticed a p-dropdown in PrimeNG 17.18.x when set in the disabled state ignores this state and can be focused and an item selected. In version 14.x it works fine. Can anyone shed some light on this for me please?

<p-dropdown placeholder=" " [formControl]="dropdownControl" [options]="options"
                        [disabled]="!isEditable" optionLabel="label" optionValue="value" optionDisabled="inactive"
                        [dropdownIcon]="'none'"
                        [appendTo]="appendTo" (onChange)="onChange.emit($event)"></p-dropdown>

Solution

  • When dealing with angular reactive forms the [disabled] attribute binding is a big NO, due to bugs it causes.

    Instead set the form control pogrammatically using disable and enable methods.

    toggleDisabled() {
      const ctrl = this.form.get('someControl');
      if(this.someCondition) {
        control.disable();
      } else {
        control.enable(); 
      }
    }