I have 3 mat-select mat-form-field along with a input filed container for each mat-select. Three of the mat-select is populated with data from same array. My aim is to remove an item from other two mat-select which is selected in a mat-select. How can i achieve this ? There is only single api i am having to get array. There is no request going on selectionChange in mat-select.
.html
<div class="input_left_container">
<mat-label>{{ "Target Slab 01" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select (ngModelChange)="getSlabPrice1($event)" formControlName="target_slab_1" (selectionChange)="removeTargetSlab($event.value)">
<mat-option *ngFor="let target of target_slab" [value]="target">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive1" placeholder="{{ 'Pay/task' | translate }}" value="{{ this.price1 }}" maxlength="40">
</mat-form-field>
</div>
<div class="input_left_container">
<mat-label>{{ "Target Slab 02" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select formControlName="target_slab_2" (ngModelChange)="getSlabPrice2($event)" (selectionChange)="removeTargetSlab($event.value)">
<mat-option *ngFor="let target of target_slab" [value]="target">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive2" placeholder="{{ 'Pay/task' | translate }}" value="{{ this.price2 }}" maxlength="40">
</mat-form-field>
</div>
<div class="input_left_container">
<mat-label>{{ "Target Slab 03" | translate }}</mat-label>
<mat-form-field appearance="outline">
<mat-select formControlName="target_slab_3" (ngModelChange)="getSlabPrice3($event)" (selectionChange)="removeTargetSlab($event.value)">
<mat-option *ngFor="let target of target_slab" [value]="target">{{ target.slabName }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="input_right_container">
<mat-label>{{ "Incentive" | translate }}</mat-label>
<mat-form-field appearance="outline">
<input matInput formControlName="incentive3" placeholder="{{ 'Pay/task' | translate }}" value="{{ this.price3 }}" maxlength="40">
</mat-form-field>
</div>
.ts
// LIST TARGET SLAB
getTargetSlab() {
this.riderservice.getTargetSlab().subscribe((res) => {
this.target_slab = res["success"].data;
});
}
// FUNCTION TO REMOVE SELECTED TARGET PLAN
removeTargetSlab(e) {
this.target_slab = this.target_slab.filter((item) => item !== e);
}
// GET SLAB PRICE
getSlabPrice1(event) {
this.target_slab_id1 =event.id;
this.price1 = event.price;
}
// GET SLAB PRICE
getSlabPrice2(event) {
this.target_slab_id2 = event.id;
this.price2 = event.price;
}
// GET SLAB PRICE
getSlabPrice3(event) {
this.target_slab_id3 = event.id;
this.price3 = event.price;
}
service.ts
// LIST TARGET SLAB
getTargetSlab() {
return this.http.get(`${this.apiUrl}listTargetSlab/`);
}
target_slab
for your 3 dropdowns. your using the same array for the all the dropdowns. once you filter the original array selected item disappeared from the all 3 dropdowns. – hansandtarget_slab1,target_slab2,target_slab3
arrays.if you select the first dropdown remove that selected value fromtarget_slab2,target_slab3
. – hansand