How to set many dropdown fields using array in Angular. Also, when choose an option from one dropdown field must not effect another field

Question

How to set many dropdown fields using array in Angular. Also, when choose an option from one dropdown field will not another field and the selected option to be shown on it's input box.

I tried a lot to achieve it, but not luck. I have also attached the code. Please review it & fix it if you have better understanding.

https://stackblitz.com/edit/angular-qfpxmy?file=src%2Fapp%2Fapp.component.ts

Answer 1

you has errors in your code, the idea is show/change filter.formField[ind]. So you should use [ngModel]="filter.formFiend[ind] instead [(ngModel)]="filter.formField" (it's innecesary use the "bannana notation" or (NgModelChange) because you change the value when click the options.

<div class="row" *ngFor="let item of dropdownsArr; let ind = index;">
  ...
<!--the [(NgModel)]="filter.formField" becomes like-->
  <input ...[ngModel]="filter.formField[ind]" 
      (click)="dropdownFieldStatus(ind, $event)">
  <ul class="dropdown filter-priority open" *ngIf="showDropDown[ind]">
      ...
  </ul>
</div>

Futhermore, your function onSelectOption should give value to this.filter.formField[ind]

onSelectOption(ind: number, index: number, bugClass: any): void {
    this.selectedOptionIndex[ind] = index;
    this.filter.formField[ind] = bugClass.title;
  }