how to restrict duplicate values from dropdown in angular2

Question

Here i have mentioned current image form.

1) It is an multiple select dropdown. it should restrict duplicate tax name. for an example in this image two time that CGST selected.

while selecting same name it should show not display here. so please help me to do this.

html

<div class="form-group">
  <label for="tax">Tax Name</label>
  <select class="form-control" id="tax_name" (change)=" dropdown(tax.value)" [(ngModel)]="model.tax" name="tax_name" #tax="ngModel">
    <option value="addNew">
      <i class="fa fa-plus" aria-hidden="true"></i>Add New Tax </option>
    <hr>
    <br/>
    <option *ngFor="let i of taxlist" [value]="i.tax_name">{{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option>
  </select>
</div>
<div>

  <label for="percentage">Tax Percentage</label>
  <input type="text" class="form-control" id="tax_percentage" placeholder="Percentage" pattern="[0-9]+" minlength="0" maxlength="3"
    [(ngModel)]="per" name="tax_percentage" #percentage="ngModel">
</div>
<button (click)="addContact(tax.value,percentage.value);" type="button" class="btn btn-success btn-sm text-right">
  <i class="fa fa-plus fa-lg"></i>
</button>

I think there is similar answer here : stackoverflow.com/questions/43512528/… — Mirko Acimovic
– Mirko Acimovic, Commented May 13, 2018 at 8:27
Actually im new to Angular Could u please tell me how to do it. — Hariprasath
– Hariprasath, Commented May 13, 2018 at 8:34

Mirko Acimovic · Accepted Answer · 2018-05-13 08:51:27Z

Ok. When you use *ngFor to loop over values you must remove any duplicate entries that are in the list. So, good way is to create a filter in Angular 2+ it is called a Pipe. It is basically filter that will remove your duplicate entries in the list so user won't be able to select multiple same values because they are filtered and not present in a list.

@Pipe(name: 'unique') 
  export class FilterPipe implements PipeTransform
{

  transform(value: any, args?: any): any {

    // Remove the duplicate elements (this will remove duplicates
    let uniqueArray = value.filter(function (el, index, array) { 
      return array.indexOf (el) == index;
    });

  return uniqueArray;   }

}

And you will use this pipe in html :

 <option *ngFor="let i of taxlist | unique" [value]="i.tax_name {{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option>

But please import this Pipe and register it in module you are using it in.

Courtesy to link I've previously provided in comment.

Rohit.007 · Accepted Answer · 2018-05-13 08:43:21Z

0

Give a try to Pipes OR you can use the newly introduced ES6 function

var items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]
var uniqueItems = Array.from(new Set(items))

It will return the unique result.

[1, 3, 4, 5, 2, 23]

answered May 13, 2018 at 8:43

Rohit.007

3,5123 gold badges23 silver badges33 bronze badges

Collectives™ on Stack Overflow

how to restrict duplicate values from dropdown in angular2

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related