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

Question

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.

Answer 1

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 ?