Disable Select Option in Angular
January 10, 2024
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.
Contents
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>
TS code:
isEmpDisabled = true;
<select name="profile" [(ngModel)]="emp.profile" [disabled]="isEmpDisabled"> ------ </select>
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 instantiatingFormControl, 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});
<select [formControl]="selectedCity">
------
</select>
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 ofFormGroup with disabled: true as below.
empForm = this.formBuilder.group({
role: [{value: "", disabled: true}],
------
});
formControlName.
<select formControlName="role"> ------ </select>
4. Disabled by Default
1. Using 'disabled' attribute at <select> element level.<select name="item" [(ngModel)]="selectedItem" disabled> ------ </select>
2. Using 'disabled' attribute at <option> element level.
<select name="item" [(ngModel)]="selectedItem"> ------ <option value="B" disabled>B</option> ------ </select>
3. Use property binding to disable element.
TS code:
isDisabled = true;
<select name="item" [(ngModel)]="selectedItem" [disabled]="isDisabled"> ------ </select>
FormControl
TS code:
selectedLang = new FormControl({value: "", disabled: true});
<select [formControl]="selectedLang"> ------ </select>
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 usingdisabled 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}
];
<select formControlName="technology">
<option *ngFor="let tech of allTechs" [disabled]="tech.isDisabled" [ngValue]="tech.techId">
{{ tech.techName }}
</option>
</select>
<select name="technology" [ngModel]="emp.technology">
<option *ngFor="let tech of allTechs" [disabled]="tech.isDisabled" [ngValue]="tech.techId">
{{ tech.techName }}
</option>
</select>
