Блог

Я использую массив форм для динамической формы с функциями добавления и удаления в нем. У меня есть два выпадающих списка в каждом array.my вопрос в том, как я могу динамически изменять опцию выбора второго выпадающего списка, соответствующую первому выпадающему списку, который не повлияет на другой список в массиве.

HTML:-

 <form [formGroup]="invoiceForm">
    <div formArrayName="itemRows">
        <div *ngFor="let itemrow of invoiceForm.controls.itemRows.controls; let i=index" [formGroupName]="i">
            <h4>Invoice Row #{{ i   1 }}</h4>
            <div class="form-group">
                <div class="row">
                    <div class="col-md-3">
                        <div for="accessCategory" class="dropdown bootstrap-select accessCategoryListings">
                            <div class="select">
                                <select class="form-control" formControlName="userGroup">
                                    <option [ngValue]="opt" *ngFor="let opt of option">{{opt}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div for="accessCategory" class="dropdown bootstrap-select accessCategoryListings">
                            <div class="select">
                                <select class="form-control" formControlName="userProfile">
                                    <option [ngValue]="opt" *ngFor="let opt of getDynamicOptions(i)">{{opt}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <input formControlName="patterns" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <a class="btn btn-danger" (click)="deleteRow(i)"><i class="fa fa-trash"
                                aria-hidden="true"></i></a>
                        <!-- <button *ngIf="invoiceForm.controls.itemRows.controls.length > 1"  >Delete Button</button> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>
  

Это моя HTML-страница, где у меня есть два выпадающих списка, в которых formControlName =»userProfile» будет динамически изменяться на основе formControlName =»UserGroup» для каждой итерации.

 Component:-

  ngOnInit() {
    this.invoiceForm = this._fb.group({
      itemRows: this._fb.array([this.initItemRows()])
    });
  }

  get formArr() {
    return this.invoiceForm.get('itemRows') as FormArray;
  }

  initItemRows() {
    return this._fb.group({
      userGroup: [''],
      userProfile: [''],
      patterns: ['']
    });
  }


  getDynamicOptions(data: any){
    var selectedData=this.invoiceForm.get('itemsRows')[data];
    this.service.get('/getOption/control' selectedData).subscribe(resp=>{ 
     return  resp 
   })

  }
  

Это мой компонент, в котором у меня есть метод под названием getDynamicOptions
раньше я получал индекс FormArray и выбирал значение из первого выпадающего списка и вызывал Api для получения второго выпадающего списка. Значение. но на самом деле не произошло того, чего я ожидал

Я ожидал получить соответствующее выпадающее значение на основе другого выпадающего списка в том же массиве

 example:

{
  "itemRows": [
    {
      "userGroup": "group1 first drop down",
      "userProfile": "group1 related drop down",
      "patterns": ""
    },
    {
      "userGroup": "group2 first drop down",
      "userProfile": "group2 related drop down",
      "patterns": ""
    }
  ]
}