CODEWITHSUNDEEP
javascriptangularhtml-select
Kayo
Kayo

Reputation: 49

Disable option based on method in angular

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?

Upvotes: 2

Views: 1318

Answers (2)

Rakesh K
Rakesh K

Reputation: 1330

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.

Upvotes: 1

John
John

Reputation: 1285

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

Upvotes: 4

Related Questions