Disable p-dropdown depending selection of another p-dropdown PrimeNG

4
votes

I am using PrimeNG in my angular app, I have issue with p-dropdown

Question

I have two dropdowns for country and caste_category, I provide caste_reservation for only India , in case of other country selection , the OPEN option from caste_category needs to get selected and make the disable that dropdown.

2
angular5primengprimeng-dropdowns

2 Answers

7
votes

If I have well understood your need, you have to set onChange event on country dropdown. This event will call a method that will trigger disabled property on caste dropdown depending on the country selected. It will also select OPEN option on this dropdown if the country is not India.

HTML

<p-dropdown [options]="countries" [(ngModel)]="applicant.country" (onChange)="updateCountry()"></p-dropdown>

<p-dropdown [options]="castes" [(ngModel)]="caste" [disabled]="disableCasteDropdown"></p-dropdown>

TS

updateCountry() {
     if(this.applicant.country!=='India') {
       this.disableCasteDropdown = true;
       this.caste = 'o';
     } else {
       this.disableCasteDropdown = false;
       this.caste = null;
     }
}

See Plunker

Is it what you're looking for ?

0
votes

If you are using Directive form controls you can disable the input, dropdown etc... by adding disabled: true in the form control

Using disabled attribute in html results to this message in console :

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
  when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
  you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });