how to disable dropdown selection?-CodePudding

I have a dropdown with 2 options:

I want the user to be able to see both options (Cips, Projects); however, I do not want to allow the user to choose a different item.

How do we allow the user to click on the dropdown and see all the options, but disable choosing any other option?

This dropdown is defined like so:

      <p-dropdown [(ngModel)]="editRagColumns.BaseObjectType"
             name="RagBasicType"
             type="text"
             
             id="RagBasicType"
             [options]="baseObjectTypes"
             optionLabel="BaseObjectTypeName"
             [style]="{'width':'100%', 'border-color':'transparent'}"
                  >
        </p-dropdown>

CodePudding user response：

As per the documentation: https://www.primefaces.org/primeng/showcase/#/dropdown

You can use this optionDisabled

CodePudding user response：

You have to add the following property to your "p-dropdown" component.

optionDisabled="BaseObjectTypeName"

This is my ts and html file that I have done to confirm that it works.

ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-question1',
  templateUrl: './question1.component.html',
  styleUrls: ['./question1.component.sass']
})
export class Question1Component implements OnInit {

  BaseObjectTypeName: string = "BaseObjectTypeName";

  baseObjectTypes: any[] = [
    { BaseObjectTypeName: "tab1" },
    { BaseObjectTypeName: "tab2" },
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

html file

<p-dropdown
  name="RagBasicType"
  type="text"
  
  id="RagBasicType"
  [options]="baseObjectTypes"
  optionLabel="BaseObjectTypeName"
  [style]="{'width':'100%', 'border-color':'transparent'}"
  optionDisabled="BaseObjectTypeName"
>
</p-dropdown>

I hope I've helped you.