javascript - Angular Reactive form disable specific options in p-dropdown - Stack Overflow

admin管理员组

文章数量:1317894

Using PrimeNg p-dropdown in ponent.

<p-dropdown 
 [options]="productRequest"
 formControlName="request"
 optionLabel="ProductName"
 (onChange)="someFunction('request')">
</p-dropdown>

Below is the JSON received from server that is used as [options] in p-dropdown

{ 
 "Increase": true,
 "Decrease" : true,
 "Like" : true,
 "Dislike" : true,
 "Old" : false,
 "Others" : true
}

I need to disable that option against which boolean: false is mentioned. Like while i click on dropdown, i am able to see all options. Now i need to disable that particular option against which boolean: false is mentioned. In above case i should be able to select all options except Old as it has boolean: false against it.

How to do so ?? Thanks in advance..

Using PrimeNg p-dropdown in ponent.

<p-dropdown 
 [options]="productRequest"
 formControlName="request"
 optionLabel="ProductName"
 (onChange)="someFunction('request')">
</p-dropdown>

Below is the JSON received from server that is used as [options] in p-dropdown

{ 
 "Increase": true,
 "Decrease" : true,
 "Like" : true,
 "Dislike" : true,
 "Old" : false,
 "Others" : true
}

I need to disable that option against which boolean: false is mentioned. Like while i click on dropdown, i am able to see all options. Now i need to disable that particular option against which boolean: false is mentioned. In above case i should be able to select all options except Old as it has boolean: false against it.

How to do so ?? Thanks in advance..

• javascript
• html
• jquery
• angular
• typescript

Share Improve this question Follow edited Sep 27, 2020 at 6:54 asked Sep 26, 2020 at 19:06 user11364823user11364823 3

• Does this answer your question? PrimeNG dropdown - disable certain SelectItems – Eldar Commented Sep 26, 2020 at 19:12
• @Eldar: Unable to identify actually what that workaround is, hence unable to implement it. If possible can you please tell me what it's saying. – user11364823 Commented Sep 27, 2020 at 6:46
• Any way @Eldar: to get specific dropdown option property on page load or on mouseclick as soon as we click to see list of options ?? If I get it, I can apply disable attribute – user11364823 Commented Sep 27, 2020 at 6:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

To disable specific options using the dropdown ponent of prime-ng, you must use SelectItem type when constructing your array.

Within the SelectItem type there is a disabled property of type boolean.

This is where you can disable a specific option by setting this property to true.

I have created you a Stackblitz with a working example here:

https://stackblitz./edit/primeng-dropdown-demo-m6a6ni

Happy Coding :-)

You can specify a field in your productRequest models as a boolean like isDisable and use it like the below example.

optionDisabled="isDisable"

<p-dropdown 
 [options]="productRequest"
 formControlName="request"
 optionLabel="ProductName"
 optionDisabled="isDisable"
 (onChange)="someFunction('request')">
</p-dropdown>

productRequest = "[{ name: 'Increase', isDisable: true}, { name: 'Old', isDisable: false}]"

本文标签： javascriptAngular Reactive form disable specific options in pdropdownStack Overflow