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 : https://stackoverflow.com/questions/43512528/how-go-get-ngfor-loop-unique-records — Mirko Acimovic, May 13 '18 at 08:27
Actually im new to Angular Could u please tell me how to do it. — Hariprasath, May 13 '18 at 08:34

score 6 · Accepted Answer · answered May 13 '18 at 08:51

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.

score 0 · Answer 2 · answered May 13 '18 at 08:43

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 '18 at 08:43

Rohit.007

3,414
2
21
33

how to restrict duplicate values from dropdown in angular2

2 Answers2