Prevent editing one item in a dropdown list in Angular by setting it to read-only

If I have a dropdown menu with options like "WORK", "RELEASE", and "OPEN", how can I make the second option, "RELEASE", read-only while allowing "WORK" and "OPEN" to be selected?

Here is a snippet of the template code:

<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>

Check out the Stackblitz example

angulartypescriptprimengprimeng-dropdowns

Answer №1

If you want to utilize the optionsLabel and optionsDisabled properties, you can refer to the official PrimeNg documentation. To implement this functionality, define your data like so:

  employeeStatus: any[] = [{status: 'WORK', disable: true },{status:  'RELEASE'}, {status:'OPEN'}];

Then, make use of these configurations:

 <p-dropdown
      [options]="employeeStatus"
      [showClear]="true"
      formControlName="employmentStatus"
      (onChange)="onDropdownUpdate($event.value)"
      class="col-6"
      optionLabel="status"
      optionDisabled="disable"
    >

Feel free to view the updated demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The module 'NgAutoCompleteModule' was declared unexpectedly by the 'AppModule'. To fix this issue, make sure to add a @Pipe/@Directive/@Component annotation

Currently, I am attempting to integrate an autocomplete feature into my Angular 2/4+ project. Despite trying various libraries, none of them seem to be working correctly. Each one presents me with a similar error message: Unexpected module 'NgAutoCom ...

javascriptangularnpmangular5angular2-template

The world of TypeScript generics and derived data types

I'm looking to streamline the process of calling multiple functions by creating a function that handles this task. These functions all require similar business logic and cleanup operations. function foo(arg: number) { // perform actions using arg ...

typescripttypescript-typingstypescript-generics

Utilize NestJS to retrieve information from an observable gRPC service

One of the challenges I am facing is using gRPC service to facilitate communication between my microservices. Specifically, when receiving a response from the Grpc service, I need to apply some modifications and additional functionality before returning a ...

node.jsangulargrpcnestjsgrpc-node

Authentication with Angular 4 and Firebase 2

I'm having some difficulty learning how to authenticate users using Angular and Firebase. When I run the Angular app using ng serve in the terminal, I keep getting this ERROR message: ERROR in /Users/.../Desktop/angular/fireauth/node_modules/angul ...

angulartypescriptfirebaseangularfire

Transform this React-Redux function component into a class component

After following the guide provided on https://github.com/Microsoft/TypeScript-React-Starter to set up my project, I encountered an example with a react component as a function. This is the current code snippet: export interface Props { name: string; ...

reactjstypescriptredux

Error: The absence of an element identified by the locator does not cause the protractor spec to fail, but rather it executes successfully

This automation framework follows the page object model and utilizes the async/await approach rather than promises. TypeScript is used, with compilation to JavaScript (protractor) for script execution. Page Object: async addProjectDetails(): Promise< ...

javascripttypescriptprotractore2e-testing

Step-by-step guide on deploying an app folder containing both Backend and Frontend folders to Heroku

I recently developed a new app named my-folder-book, which consists of two folders known as my-folder-front and my-folder-back. These folders are built using React and NodeJS. Could someone please assist me with uploading this app folder? I am having trou ...

node.jsangularreactjsnodes

Encounter the warning message "EBADENGINE does not support engine @angulardevkit" while attempting to install class-validator and class-transformer with NestJS

Currently, I am going through the NestJS website course and I encountered an issue while trying to install class-validator and class-transformer using npm i class-validator class-transformer Upon running the command, I received the following error: npm WA ...

node.jsangularubuntunpmnestjs

the most effective method for including a new field in a formGroup

How can I correctly add a new object property to an Angular formGroup? Currently, my setup looks like this: ngOnInit() { this.form = this.fb.group({ // store is the formGroupname store: this.fb.group({ // branch and code are formControlN ...

angularangular-formsangular-formbuilder

Issue with Angular: Global variable not updating within Subscription function

I'm encountering difficulties with updating a global variable in Angular 7 by using TypeScript. I am utilizing a service that retrieves JSON data from a database via a Restful API The service : export class myService { constructor(private client ...

angulartypescriptglobal-variablesobservablesubscription

The module 'react' or its type declarations could not be located

Recently, I made the switch from Yarn version 1.x to 3.x (latest) and encountered some issues with Typescript in my project. Despite searching for solutions, none of the suggested fixes have resolved the problem that many others seem to be facing as well. ...

reactjstypescriptyarnpkgyarn-v2

Tips for retrieving the text from a POST request in C#

I have a basic Angular form that allows users to upload a file along with a description. constructor(private http: HttpClient) { } upload(files) { if (files.length === 0) return; const formData: FormData = new FormData(); var filedesc ...

c#asp.net-mvcangulartypescript

Issue when transferring properties of a component to a component constructed Using LoadingButton MUI

Check out my new component created with the LoadingButton MUI: view image description here I'm having issues passing props to my component: view image description here Dealing with a TypeScript problem here: view image description here I can resolv ...

typescriptmaterial-ui

Building a data table in Angular using material design components and populating it

Having recently started using Angular and Angular Material, I am facing an issue with binding and displaying data from the HTTP service into a table. When I console log the data, it appears after the page is loaded and sometimes I encounter errors of undef ...

angularangular-material

What is the method for returning a string array?

My query is about how to return a string[]. Currently, TypeScript is throwing an error because each element of the array has a type of ( T[keyof T] extends readonly (infer InnerArr)[] ? InnerArr : T[keyof T] ). How can I accept the 'property' arg ...

javascripttypescript

I'm curious as to why my form data is being transmitted as application/json during my POST request, and what is causing it to generate a Bad Request error?

When adding a hotel to the database using react-hook-form, I include images as part of the form input. After submitting the form, the data is converted into FormData and then sent to the API for processing. The conversion and submission of the form take p ...

reactjsnode.jstypescriptmultipartform-datamulter

if the condition is not met, proceed to the alternate template eventually

Hey there, I'm facing an issue with my code that resembles something like this: <ng-container *ngIf="firstCondition; else Farewell"> <ng-container *ngIf="innerContainer"> <div class="Hello Message"> {{HelloMessa ...

htmlangular

The method JSON.stringify is not properly converting the entire object to a string

JSON.stringify(this.workout) is not properly stringifying the entire object. The workout variable is an instance of the Workout class, defined as follows: export class Workout { id: string; name: string; exercises: Exercise[]; routine: Ro ...

javascriptjsontypescriptstringify

`Is there a way to effectively test an @Input component in Angular?`

Despite multiple successful attempts in the past, I am facing some difficulty getting this to function properly. Within my component, I have an input @Input data: Data, which is used in my template to conditionally display certain content. Oddly enough, du ...

javascriptangulartypescriptjasminekarma-jasmine

Display the chosen HTML template in real-time

Recently, I started using Angular 2 and encountered an issue that I need help with. 1] I have created 2-3 templates for emails and SMS that will display predefined data. 2] I have also designed a screen with a dropdown menu containing options like email ...

angularjshtmltypescriptangular