Angular: Set one element in dropdown list to readonly-CodePudding

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 >
        <div >
            <div >
                <label >Status</label>
                <p-dropdown
                    [options]="workStatus"
                    [showClear]="true"
                    formControlName="workingStatus"
                    >
                </p-dropdown>
            </div>

Stackblitz

CodePudding user response：

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)"
      
      optionLabel="name"
      optionDisabled="disabled"
    >

You can check the updated sample here