Question

我正在使用具有添加和删除功能的动态数组表单。我在每个数组中都有两个下拉菜单。我的问题是如何动态更改第二个下拉菜单的选择选项（对应于第一个下拉菜单），而不会影响数组中的其他列表。

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": ""
    }
  ]
}

说如何在Angular中将FormArray用于动态表单

0 个答案: