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}} ( {{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>
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}} ( {{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.