Angular: Set one element in dropdown list to readonly

April 12, 2022

Let’s say I have a dropdown menu, with the following options: "WORK", "RELEASE", "OPEN". The second option "RELEASE" should be readonly in contrast to "WORK" and "OPEN". How can I do this?

The template looks like this:

<form [formGroup]="form">
    <div class="flex">
        <div class="col-3">
            <div class="flex flex-row align-items-center">
                <label class="col-6">Status</label>
                <p-dropdown
                    [options]="workStatus"
                    [showClear]="true"
                    formControlName="workingStatus"
                    class="col-6">
                </p-dropdown>
            </div>

Stackblitz

>Solution :

You can use options specified in the optionsLabel and optionsDisabled properties as described in PrimeNg documentation.
To do so, you can define your data as follow:

  workStatus: any[] = [{name: 'WORK', disabled : true },{name:  'RELEASE'}, {name:'OPEN'}];

And use the follow settings:

 <p-dropdown
      [options]="workStatus"
      [showClear]="true"
      formControlName="workingStatus"
      (onChange)="onDropdownChange($event.value)"
      class="col-6"
      optionLabel="name"
      optionDisabled="disabled"
    >

You can check the updated sample here