Disable Select Option in Angular

By Arvind Rai, January 10, 2024
On this page, we will learn to disable select options in Angular application.
1. Select option is disabled using disabled attribute of <select> and <option> element.
2. When we use disabled attribute at <select> element level, select box is disabled completely.
3. When we use disabled attribute at <option> level, only that option is disabled.
4. To disable select option dynamically, use property binding as [disabled] .
5. We can disable select option using FormControl by passing disabled as true while instantiating it.

1. Using 'disabled'

In select element, disabled attribute can be used at two level either at <select> element level or at <option> level.
1. When we use disabled at <select> element level, the complete select box is disabled and does not respond to click on it.
<select name="profile" [(ngModel)]="emp.profile" disabled>
   ------
</select> 
To disable/enable dynamically, use property binding.
TS code:
isEmpDisabled = true; 
HTML code:
<select name="profile" [(ngModel)]="emp.profile" [disabled]="isEmpDisabled">
   ------
</select> 
2. We can disable options using disabled attribute at <option> level.
<select name="profile" [(ngModel)]="emp.profile">
  <option value="A" >A</option>
  <option value="B" disabled>B</option>
</select> 

2. Disable with FormControl

While instantiating FormControl, we pass FormControlState that has two properties as value and disabled. The value is used for initial value and disabled is used to disable/enable element.
TS code:
selectedCity = new FormControl({value: "", disabled: true}); 
HTML code:
<select [formControl]="selectedCity">
       ------
</select> 
As disabled: true, the select box will be disabled.
To disable select box with a default selected value, create FormControl as below.
selectedCity = new FormControl({value: "prayag", disabled: true}); 

3. Using FormGroup

To disable an element in reactive form, we need to create form controls of FormGroup with disabled: true as below.
empForm = this.formBuilder.group({
   role: [{value: "", disabled: true}],
   ------
}); 
Now bind select element with formControlName.
		
<select formControlName="role">
   ------
</select>	

4. Disabled by Default

1. Using 'disabled' attribute at <select> element level.
<select name="item" [(ngModel)]="selectedItem" disabled>
  ------
</select> 
Complete select box will be disabled.
2. Using 'disabled' attribute at <option> element level.
<select name="item" [(ngModel)]="selectedItem">
  ------
  <option value="B" disabled>B</option>
  ------
</select> 
Option B will be disabled.
3. Use property binding to disable element.
TS code:
isDisabled = true; 
HTML code:
<select name="item" [(ngModel)]="selectedItem" [disabled]="isDisabled">
  ------
</select> 
4. With FormControl
TS code:
selectedLang = new FormControl({value: "", disabled: true}); 
HTML code:
<select [formControl]="selectedLang">
  ------
</select> 
Select box will be disabled with no default selected.
To disable select box with default value, find the code.
selectedLang = new FormControl({value: "java", disabled: true}); 

5. Disable on Condition Dynamically

Here we will learn to disable select options on condition dynamically using disabled at <option> level.
Suppose we have following array to create a select box.
const allTechs = [
    {techId: 100, techName: 'Python', isDisabled: false},
    {techId: 101, techName: 'Angular', isDisabled: true},
    {techId: 102, techName: 'Hibernate', isDisabled: false},
    {techId: 103, techName: 'JavaScript', isDisabled: true}
]; 
1. Create select box dynamically in reactive form.
<select  formControlName="technology">
	<option *ngFor="let tech of allTechs" [disabled]="tech.isDisabled" [ngValue]="tech.techId">
		{{ tech.techName }}
	</option>
</select> 
2. Create select box dynamically in template-driven form.
<select name="technology" [ngModel]="emp.technology">
	<option *ngFor="let tech of allTechs" [disabled]="tech.isDisabled" [ngValue]="tech.techId">
		{{ tech.techName }}
	</option>
</select> 

6. Reference

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us