Disable p-dropdown depending selection of another p-dropdown PrimeNG
Asked Answered
B

2

5

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.

Butterandeggs answered 5/4, 2018 at 12:51 Comment(0)
J
9

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 ?

Jakob answered 5/4, 2018 at 13:5 Comment(3)
thanks for urs quick help , i am just test and back hereButterandeggs
hey @Jakob i need exactly as you posted , just my data i coming from apis .yours solution works thanks, yours efforts really appreciative man thanks again.Butterandeggs
My pleasure ! :)Jakob
H
0

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)
  });
Hindenburg answered 15/4, 2019 at 9:31 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.