Remove selected option from dropdown after select

Question

I have a scenario that i need to show dropdowns with selected or default values in view if there is any data from API. And i can add new dropdowns using add button. But i have to select value from drop downs only once so it will not repeated.

I am using ngFor loop to show this drop downs and i am using splice method to remove selected options from drop down. And i am facing a issue here that

Example: If i select car 1 from 1st drop down 1 and the 2nd drop down i can not see car 1 but if i go again to drop down 1 and change that option to car 2,
in drop down 2 i cannot see car 1 and car 2 options because splice deleting those option from that array.

<mat-select required formControlName="productTypeCode"

(selectionChange)="selectType($event.value)">
              <mat-option>Select</mat-option>
              <mat-option *ngFor="let type of newarrayvalues"
                          [value]="type.code">
                {{type.name}}
              </mat-option>
            </mat-select>

PriorExperience -> form array for this dropdowns

  for (let i = 0; i < this.InvestmentTypes.length; i++) {
        for (let j = 0; j < this.PriorExperience.controls.length; j++) {
          if (this.InvestmentTypes[i].code == this.financialDetailsForm.value.piExperience[j].productTypeCode) {
           // this.removedValues.push(this.newarrayvalues[i])
            this.InvestmentTypes.splice(i, 1);
          }
        }

I need to remove only selected values and if i change any dropdown value that should only removed from that array

Please help me with this.

Answer 1

Your problem is that they are sharing the same data.

If I were you, I would create component that takes the value of the array as and @Input. then in that component put the logic of the deleting the option. Then in the parent component you are going to render with a foorLoop that component you have created.

Answer 2

because splice deleting those option from that array.

don't splice the actual object instead

Create a Array of objects with available data, object should be like

{value: " yourValue", selected: "booleanValue" }

If the value is selected in any of the dropdowns just change the boolean to true.

<mat-select required formControlName="productTypeCode"
    (selectionChange)="selectType($event.value)">
        <mat-option>Select</mat-option>
        <ng-container *ngFor="let type of newarrayvalues">
            <mat-option *ngIf="type.selected"
                          [value]="type.value">
            {{type.value}}
        </ng-container>
 </mat-select>

Answer 3

You just need to remove that element using filter function and again assign to Form using Form group. this solve my problem hope this work for you too.

<mat-form-field class="form-field-width pr-2">
    <mat-select placeholder="Artist" formControlName="artist" multiple>
        <mat-option class="cls-2" *ngFor="let artist of artists" [value]="artist._id">{{
            artist.artistName
        }}</mat-option>
    </mat-select>
</mat-form-field>


removeArtist(type: string){
    if (type === 'artist') {
        this.filterForm.value.artist = this.filterForm.value.artist.filter((stl: string) => stl !== chip._id);
    }
    this.filterForm = this.fb.group({
        artist: [this.filterForm.value.artist, null],
    });
}