Angular 6 Reactive Form - Select options: disable previously selected options

Question

I have 3 dropdown menus that must have unique values (I am assigning network adapters here), so if one nic is selected in dropdown 1, it must be disabled in dropdowns 2 and 3. I have found this answer and a few other's, but I can't get them to work.

component.ts

nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10']


   this.inputForm = this.fb.group({
    upLinks: this.fb.group ({
         NumberUplinks: ['2'],
            uplinksMgmt: this.fb.group ({
                uplink1: ['nic0'],
               uplink2: ['nic1'],
               uplink3: ['nic3'],
            })
        })
})

component.html

<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink1" id="uplink1Id" class="selectBox">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
    </select>
</div>
<div class="select" formGroupName="uplinksMgmt">
     <select formControlName="uplink2" id="uplink2Id" class="selectBox">
       <option *ngFor="let uplink2x of nicAdapters" [ngValue]="uplink2x">{{uplink2x}}</option>
    </select>
</div>
<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink3" id="uplink3Id" class="selectBox">
        <option *ngFor="let uplink3x of nicAdapters" [ngValue]="uplink3x" {{uplink3x}}</option>
    </select>
</div>

Add flag to every `nicAdapter` and set it as require or add proper conditions. — Antoniossss, Aug 07 '18 at 09:58

Antoniossss · Answer 1 · 2018-08-08T12:36:12.777

2

Set disabled attribute on required options if those are selected somewhere else

<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink1" id="uplink1Id" class="selectBox">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x" [disabled]="uplink1x === form.controls.uplink2.value || uplink1x==form.controls.uplink3.value " >{{uplink1x}}</option>
    </select>
</div>

obviously form is FormGroup and you have to set poper variable name for that as you didn't provide relevant component code.

edited Aug 08 '18 at 12:36

answered Aug 07 '18 at 10:03

Antoniossss

31,590
6
57
99

Thanks Antoniossss, very helpful. I'm pretty new to Angular, so this whole grouping is a bit confusing for me :-/ I am editing my question to include the onInit group – PhilipK Aug 07 '18 at 10:38
@PhilipK you can consider upvoting my answer if it was helpfull or even mark as accepted if that solved your problem. – Antoniossss Aug 07 '18 at 10:39
Will do, of course. I'm a bit confused by your "obviously form is FormGroup" statement. – PhilipK Aug 07 '18 at 10:59
You either have provide patho to the value from `this.inputForm` (since you have complex form it will be long like `this.inputForm.value.upLinks.uplinkMgmt.uplink1` or something similar. You can debug data structure using either `console.log(this.inputForm.value)` or in template you can `{{inputForm.value | json}}` to figure out exact path to required values. – Antoniossss Aug 07 '18 at 11:05
Ah! gotcha. Problem, now every option in the dropdown is disabled, not just the one matching the ones selected in 2 or 3 – PhilipK Aug 07 '18 at 12:42
Fix the condition as for some rason it is wrong. You are not exused from thinking you know. If you want me to solve that problem from top to bottom, prepare working, reproduceable example using Stackblitz. – Antoniossss Aug 07 '18 at 14:20
Sorry for the late response Antoniossss but in the meantime I have discovered, that it seems like that `disabled="true"` (or `disabled="false"` for that matter) doesn't work with option values. See my follow up question here: https://stackoverflow.com/q/51729874/10092371 – PhilipK Aug 08 '18 at 10:36
@PhilipK ofc it works - try to select "test true" https://stackblitz.com/edit/clarity-light-theme-v012-3y6xvg?file=src/app/app.component.html – Antoniossss Aug 08 '18 at 12:34
This worked for me beautifully! +1 for me @Antoniossss, thank you – Lauren Oct 01 '18 at 15:53

score 0 · Answer 2 · answered Aug 07 '18 at 10:33

Try this custom pipe will helps to filter the data. Also refer this link for your reference sample

*.component.ts

import { Component,Pipe,PipeTransform } from '@angular/core';


@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform {
transform(value: any,key: string): any {    
  if (!value || !key) {return value;}  
  return value.filter( value =>(value.search(key) !== 0));
}
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {  
  nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10'];
  selectedValue:any;

}

*.component.html

<div class="select">
    <select id="uplink1Id" class="selectBox" (change)="selectedValue=$event.target.value">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
    </select>
</div>
<div class="select">
     <select id="uplink2Id" class="selectBox" >
       <option *ngFor="let uplink2x of nicAdapters | filter:selectedValue" [ngValue]="uplink2x">{{uplink2x}}</option>
    </select>
</div>
<div class="select">
    <select id="uplink3Id" class="selectBox" >
        <option *ngFor="let uplink3x of nicAdapters | filter:selectedValue" [ngValue]="uplink3x"> {{uplink3x}}</option>
    </select>
</div>

Thanks! It says it can't find the Pipe 'filter' - is the declaration in the right spot? — PhilipK, Aug 07 '18 at 12:43

score 0 · Answer 3 · answered Aug 07 '18 at 10:46

0

Use (change)="changedVal($event.target.value)" in select of "dropdown1". the selected value in dropdown will be shown, now assign this value in a class variable say "dropdown1Val" and use [attr.disabled]="uplink2x === dropdown1Val" in option of fomr 2 and form 3.

That should work!!

E.g:

<div class="select" formGroupName="uplinksMgmt">
<select formControlName="uplink1" id="uplink1Id" class="selectBox" (change)="changedVal($event.target.value)">
    <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
</select>

Component.ts

public changedVal(val) { 
  this.dropdown1Val = val;
}

For Form 2 or Form 3

<div class="select" formGroupName="uplinksMgmt">
 <select formControlName="uplink2" id="uplink2Id" class="selectBox">
   <option *ngFor="let uplink2x of nicAdapters" [attr.disabled] = "uplink2x === dropdown1Val" [ngValue]="uplink2x">{{uplink2x}}</option>
</select>

answered Aug 07 '18 at 10:46

Danish Arora

330
1
6

This works almost like by Antoniossss. Except all values in dropdown menu uplink2x are disabled, not just the one selected in uplink1x – PhilipK Aug 07 '18 at 12:57
Please share a plunkr or stackblitz link so that i could understand what's going wrong with the approach – Danish Arora Aug 07 '18 at 18:55
Moreover, Antoniossss example shows to solution to disable form 1 options based on value of form2 or form3. i guess, problem is to disable other two based on form 1 selection. Correct me if i am wrong – Danish Arora Aug 07 '18 at 18:57
In the meantime, I have discovered that it seems like that `disabled="true"` (or `disabled="false"` for that matter) doesn't work with option values. See my follow up question here: https://stackoverflow.com/q/51729874/10092371 – PhilipK Aug 08 '18 at 10:34

score 0 · Answer 4 · answered Dec 14 '18 at 08:30

TypeScript:

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

public formGroup: FormGroup;
constructor(public fb: FormBuilder) { 
    this.formGroup = this.fb.group({
      store: [{ value:"", disabled: true },[Validators.required, Validators.maxLength(4), Validators.pattern( /[0-9\.]/)]],
    });
 }

// Inside your function.
this.formGroup.controls['store']['enable']();

Html

<select formControlName="store" class="form-control form-control-sm">
    <option value="np">Nepal</option>
    <option value="in">India</option>
    <option value="pk">Pakistan</option>
    <option value="ch">China</option>
</select>

Angular 6 Reactive Form - Select options: disable previously selected options

4 Answers4

Linked