Disable option based on method in angular

Question

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?

John · Accepted Answer · 2021-08-26 11:20:14Z

4

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";
}

answered Aug 26, 2021 at 11:20

John

1,2949 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rakesh K · Accepted Answer · 2021-08-26 11:23:24Z

1

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.

answered Aug 26, 2021 at 11:23

Rakesh K

1,3301 gold badge18 silver badges44 bronze badges

Collectives™ on Stack Overflow

Disable option based on method in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related