Скажите, как использовать FormArray для динамической формы в Angular - PullRequest
Новая
       61

Скажите, как использовать FormArray для динамической формы в Angular

0 голосов
/ 27 марта 2019

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

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 для получения второго значения раскрывающегося списка. но на самом деле это не так, как я ожидал

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

example:

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