I'm trying to disable option based on method.
Example I have 4 options:
A
B
C
D
My method (example) :
if(name == A) {
disable select for A.
}
My code:
this.http.getDataFromServer("api/....).subscribe((resp) => {
this.code = resp.data["route"];
console.log(this.code);
});
In this.code I have multiple data. This is the HTML in the component:
<div class="form-group">
<label for="route_code">
Route Code
</label>
<select type="text" class="form-control" formControlName="route_code" (change)="codeSelected($event.target.value)">
<option [value]="r.id" *ngFor="let r of code" [disabled]="disable()">
{{r.code}}
</option>
</select>
</div>
Here I have my HTML code where r.code are the options.
After searching I found [disable] and I can assign it to a method disable()
Component.ts has this code:
disable(){
}
What should I add within the disable method? For example I want to disable an option if r.code == "A". Could you help me out?
One option would be to pass the value to disable as an argument:
component.html
<div class="form-group">
<label for="route_code">
Route Code
</label>
<select type="text" class="form-control" formControlName="route_code" (change)="codeSelected($event.target.value)">
<option [value]="r.id" *ngFor="let r of code" [disabled]="disable(r.code)">
{{r.code}}
</option>
</select>
</div>
component.ts
disable(code: string): boolean {
return code === "A";
}
You can pass the current r in your method.
<option [value]="r.id" *ngFor="let r of code" [disabled]="disable(r)">
{{r.code}}
</option>
Then in disable method you can receive that value which you passed like this.
disable(r){
return r.code === "A";
}
This expression will return true or false.
This solution should work.