CODEWITHSUNDEEP
angularangular6angular-reactive-forms
PhilipK
PhilipK

Reputation: 63

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

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>

Upvotes: 1

Views: 4137

Answers (4)

Ram Pukar
Ram Pukar

Reputation: 1621

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>

Upvotes: 0

Antoniossss
Antoniossss

Reputation: 32527

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.

Upvotes: 2

Danish Arora
Danish Arora

Reputation: 338

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>

Upvotes: 0

Akilesh Kumar R
Akilesh Kumar R

Reputation: 398

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>

Upvotes: 0

Related Questions