Remove selected option from second mat-select which was from first mat-select

Question

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/`);
  }

Answer 1

I assumed you use form as FormGroup

private _ngUnsubscribe = new Subject();
private target_slab = [];
public form: FormGroup;

ngOnInit() {
  this.form = new FormGroup({
    target_slab_1: new FormControl(),
    incentive1: new FormControl(),
    target_slab_2: new FormControl(),
    incentive2: new FormControl(),
    target_slab_3: new FormControl(),
    incentive3: new FormControl(),
  });

  [1, 2, 3].forEach(index => {
    this.form.controls[`target_slab_${index}`].valueChanges
      .pipe(
        takeUntil(this._ngUnsubscribe)
      )
      .subscribe(value => {
        const item = this.target_slab.find(item => item.id === +value);
        this.form.controls[`incentive${index}`].setValue(item ? item.price : '');
      });
  });
}

get targetSlab1Options() {
  return this.target_slab.filter(item => item.id !== +this.form.controls.target_slab_2.value && item.id !== +this.form.controls.target_slab_3.value);
}

get targetSlab2Options() {
  return this.target_slab.filter(item => item.id !== +this.form.controls.target_slab_1.value && item.id !== +this.form.controls.target_slab_3.value);
}

get targetSlab3Options() {
  return this.target_slab.filter(item => item.id !== +this.form.controls.target_slab_1.value && item.id !== +this.form.controls.target_slab_2.value);
}

getTargetSlab() {
  this.riderservice.getTargetSlab().subscribe((res) => {
    this.target_slab = res["success"].data;
  });
}

<div class="input_left_container">
  <mat-label>{{ "Target Slab 01" | translate }}</mat-label>
  <mat-form-field appearance="outline">
    <mat-select formControlName="target_slab_1">
      <mat-option *ngFor="let target of targetSlab1Options" [value]="target.id">{{ 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 }}" 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">
      <mat-option *ngFor="let target of targetSlab2Options" [value]="target.id">{{ 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 }}" 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">
      <mat-option *ngFor="let target of targetSlab3Options" [value]="target.id">{{ 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 }}" maxlength="40">
  </mat-form-field>
</div>