Angular - Disable select option if value exists in array

Question

I have nesting select element in a form and I only want each value selected once. How can I check if occupation.occupation exists in the selectedoccupations array and set [disabled]='' to true if it exists?

component

  selectedOccupations: any[] = [
    { occupation: 'dev' },
  ];

template

<tr>
          <td>
            <md-select formControlName="occupation" [ngModelOptions]="{standalone: true}" placeholder="Occupation" (change)="filterGuests($event, i)">
              <md-option [value]="null">Occupation</md-option>
              <md-option *ngFor="let occupation of occupationz" [value]="occupation.occupation" [disabled]="">
                {{ occupation.occupation }}
              </md-option>
            </md-select>
          </td>
        </tr>

Have you tried using a filter?

brijmcq
– brijmcq

2017-08-15 00:36:47 +00:00
Commented Aug 15, 2017 at 0:36 — brijmcq
– brijmcq, Commented Aug 15, 2017 at 0:36

Zze · Accepted Answer · 2017-08-15 00:54:56Z

2

Make a call to a typescript function which returns the value for you!

<tr>
  <td>
    <md-select formControlName="occupation" [ngModelOptions]="{standalone: true}" placeholder="Occupation" (change)="filterGuests($event, i)">
      <md-option [value]="null">Occupation</md-option>
      <md-option *ngFor="let occupation of occupationz" [value]="occupation.occupation" [disabled]="isDisabled(occupation)">
        {{ occupation.occupation }}
      </md-option>
    </md-select>
  </td>
</tr>

And then in typescript:

function isDisabled(occupation: any):boolean{
    // if it exists... disabled == true;
    return selectedOccupations.includes(occupation.occupation); // note, i'm not certain if this should just be occupation.
}

answered Aug 15, 2017 at 0:54

Zze

18.9k14 gold badges95 silver badges125 bronze badges

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

Comments

LarsMonty · Accepted Answer · 2017-08-15 00:38:21Z

0

Try [disabled] = "selectedOccupations.includes(occupation)" ?

This isn't very efficient, but shouldn't be all that bad.

answered Aug 15, 2017 at 0:38

LarsMonty

7628 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular - Disable select option if value exists in array

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