How can you block a specific drop-down choice in Angular 2?

Question

How can you block a specific drop-down choice in Angular 2?

TS FILE

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


/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})


export class SelectOverviewExample {
  resData = {
    "data": ["Pune", "Mumbai", "Pimpari", "Nagpur", "Hydrabad", "Assam", "Karnataka", "Bihar", "Maharashtra", "Delhi", "Srinagar", "Shimla", "Goa",  "Rajasthan", "MP", "Aandhra-Pradesh"]
  }
  selectOne : string ='';
  selectTwo='';
  selectThree='';
  selectFour='';
  one='';

   @ViewChild('select2') _select2: any
   firstSelections: string = '';

//    setFirstValues(form) {
//      this.firstSelections = form.value.select1
//      if (this._select2.value) {
//        const secondSelectionsValues = this._select2.value.slice();
//        for (var i = secondSelectionsValues.length - 1; i >= 0; i--) {
//          if (this.firstSelections.includes(secondSelectionsValues[i])) {
//              secondSelectionsValues.splice(i, 1)
//            this._select2.writeValue(secondSelectionsValues);
//          }
//        }
// }
// }


onChanged(){
  this.resData.data.forEach(ele =>{
if(ele == this.selectOne)
this.selectTwo !== this.selectOne;
  })
  }
}

HTML

<form #myForm="ngForm">


  <div class="col-md-4">
<mat-form-field >
    <mat-select [(ngModel)]="selectOne" name="selectOne" (selectionChange)="onChanged()">
        <mat-option *ngFor="let time1 of resData.data" value="time1" >{{time1}}</mat-option>
    </mat-select>
</mat-form-field>
  </div>

<div class="col-md-4">
    <mat-form-field >
        <mat-select [(ngModel)]="selectTwo"  name="selectTwo"  (selectionChange)="onChanged()">
            <mat-option *ngFor="let time2 of resData.data" value="time2"  >{{time2}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select  [(ngModel)]="selectThree" name="selectThree">
            <mat-option *ngFor="let time3 of resData.data" value="time3" >{{time3}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select [(ngModel)]="selectFour" name="selectFour">
            <mat-option *ngFor="let time4 of resData.data" value="time4" >{{time4}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<form>

Explanation: when I select a value in the first dropdown, that value is disabled in dropdowns two, three, and four. Each dropdown must have a unique value, ensuring no duplicate values. Should I use the (selectionchange) or (ngModelChange) events for this functionality? Thank you in advance.

Check out my stackblitz example here - https://stackblitz.com/edit/on-change-selection?file=app%2Fselect-overview-example.html

angular typescript angular-material

Answer 1

Answer №1

When creating a form in HTML ::

<form #myForm="ngForm">


  <div class="col-md-4">
<mat-form-field >
    <mat-select [(ngModel)]="selectOne" name="selectOne" (selectionChange)="onChanged(selectOne)">
        <mat-option *ngFor="let time1 of resData.data" [value]="time1" >{{time1}}</mat-option>
    </mat-select>
</mat-form-field>
  </div>

<div class="col-md-4">
    <mat-form-field >
        <mat-select [(ngModel)]="selectTwo"  name="selectTwo"  (selectionChange)="onChanged(selectTwo)">
            <mat-option *ngFor="let time2 of resData.data" [value]="time2"  >{{time2}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select  [(ngModel)]="selectThree" name="selectThree">
            <mat-option *ngFor="let time3 of resData.data" [value]="time3" >{{time3}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select [(ngModel)]="selectFour" name="selectFour">
            <mat-option *ngFor="let time4 of resData.data" [value]="time4" >{{time4}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<form>

For the TypeScript on change event ::

onChanged(event){
  console.log(this.resData.data[0]);
this.resData.data = this.resData.data.filter(ele => ele !== event);
console.log(this.resData);
}

Fingers crossed that this solution works for you!

Answer 2

When creating a form in HTML ::

<form #myForm="ngForm">


  <div class="col-md-4">
<mat-form-field >
    <mat-select [(ngModel)]="selectOne" name="selectOne" (selectionChange)="onChanged(selectOne)">
        <mat-option *ngFor="let time1 of resData.data" [value]="time1" >{{time1}}</mat-option>
    </mat-select>
</mat-form-field>
  </div>

<div class="col-md-4">
    <mat-form-field >
        <mat-select [(ngModel)]="selectTwo"  name="selectTwo"  (selectionChange)="onChanged(selectTwo)">
            <mat-option *ngFor="let time2 of resData.data" [value]="time2"  >{{time2}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select  [(ngModel)]="selectThree" name="selectThree">
            <mat-option *ngFor="let time3 of resData.data" [value]="time3" >{{time3}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div class="col-md-4">
    <mat-form-field>
        <mat-select [(ngModel)]="selectFour" name="selectFour">
            <mat-option *ngFor="let time4 of resData.data" [value]="time4" >{{time4}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>
<form>

For the TypeScript on change event ::

onChanged(event){
  console.log(this.resData.data[0]);
this.resData.data = this.resData.data.filter(ele => ele !== event);
console.log(this.resData);
}

Fingers crossed that this solution works for you!

Answer 3

Answer №2

If you want to filter already selected data, you can create a custom pipe for that purpose.

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

@Pipe({
  name: 'cityFilter',
  pure: false
})
export class CityFilterPipe implements PipeTransform {
  transform(items: any[], selectedItems: any[]): any {
    return items.filter(item => selectedItems.indexOf(item) < 0);
  }
}

After creating the pipe, you can use it in conjunction with *ngFor as shown below:

<form #myForm="ngForm">
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectOne" name="selectOne">
                <mat-option *ngFor="let time1 of resData.data" [value]="time1">{{time1}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectTwo" name="selectTwo">
                <mat-option *ngFor="let time2 of resData.data | cityFilter:[selectOne]" [value]="time2">{{time2}}         </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectThree" name="selectThree">
                <mat-option *ngFor="let time3 of resData.data | cityFilter:[selectOne,selectTwo]" [value]="time3">{{time3}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectFour" name="selectFour">
                <mat-option *ngFor="let time4 of resData.data| cityFilter:[selectOne,selectTwo, selectThree]" [value]="time4">{{time4}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
<form>

Check out the demo here.

Answer 4

If you want to filter already selected data, you can create a custom pipe for that purpose.

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

@Pipe({
  name: 'cityFilter',
  pure: false
})
export class CityFilterPipe implements PipeTransform {
  transform(items: any[], selectedItems: any[]): any {
    return items.filter(item => selectedItems.indexOf(item) < 0);
  }
}

After creating the pipe, you can use it in conjunction with *ngFor as shown below:

<form #myForm="ngForm">
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectOne" name="selectOne">
                <mat-option *ngFor="let time1 of resData.data" [value]="time1">{{time1}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectTwo" name="selectTwo">
                <mat-option *ngFor="let time2 of resData.data | cityFilter:[selectOne]" [value]="time2">{{time2}}         </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectThree" name="selectThree">
                <mat-option *ngFor="let time3 of resData.data | cityFilter:[selectOne,selectTwo]" [value]="time3">{{time3}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div class="col-md-4">
        <mat-form-field>
            <mat-select [(ngModel)]="selectFour" name="selectFour">
                <mat-option *ngFor="let time4 of resData.data| cityFilter:[selectOne,selectTwo, selectThree]" [value]="time4">{{time4}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
<form>

Check out the demo here.

How can you block a specific drop-down choice in Angular 2?

Answer №1

Answer №2

Similar questions

Ensure all promises are resolved inside of for loops before moving on to the next

Revise regular expression for verifying addresses

Show the chosen choice in a select dropdown with custom text using Angular

Advantages of creating model classes in Angular 2 and above

Creating an interactive webpage with Javascript and HTML

Updating the state of the Store using NGRX

Ways to transfer selected options from a dropdown menu to a higher-level component

Mastering the use of Action.Submit in adaptive cards to simulate user input

Encountering an issue connecting to the backend server for the

Can we resolve the warnings arising from third party dependencies in a React application?

What is the best way to retrieve the response from an Observable/http/async call in Angular?

Exploring the process of retrieving token expiration in TypeScript using the 'jsonwebtoken' library

Leveraging foreign key attributes within Angular templates

Leveraging the Angular (2) routerLinkActive directive to handle dynamic routes

What causes the appearance of the "?" symbol at the beginning of the URL and triggers a reboot of the app when moving through the absolute path?

I encountered difficulties accessing the native Camera API when working with the most recent version of Ionic

A method to access a stored value in localStorage that does not involve utilizing the __zone_symbol__value property

Exploring TypeScript in the world of Shopify Command Line Interface

Nested Observables in Angular are essential for handling asynchronous

Angular array of considerable size