在多列中显示formArray输入

问题描述

我已经创建了一个formArray表，现在我试图在4列中仅显示4行，因为我有一个仅包含4个区域的数组，所以我使用嵌套循环将区域彼此，区域本身结合在一起O（n）^ 2的复杂度给了我16种组合，并且在初始化formarray时，所有输入字段都显示在第一列中，情况并非如此。我只需要在每列中显示4个即可。我正在使用Angular材质，那么我该如何实现呢？这是我的HTML代码

<div *ngIf="enableCombinationDirective">
  <div fxLayout="row">
      <div class="h1">Add Prices</div>
      <div [formGroup]="combinationForm">
        <div formArrayName="dest" *ngFor="let item of combinationForm.get('dest')['controls']; let i = index">
          <div fxLayout="row" class="check" fxLayoutAlign="space-evenly">
            <mat-form-field appearance="outline" [formGroupName]="i" style="width: 20% !important;" apprearance="outline" fxFlex="50">
              <mat-label>{{
                combinationForm
                    .get("dest")
                    ["controls"][i].get("combinationTitle").value
            }}</mat-label>
            <input
                          matInput
                          type="number"
                          #destInput
                          formControlName="price"
                          placeholder="Enter Price"
                      />
                      <mat-checkBox
                      formControlName="isActive"
                      matSuffix
                  ></mat-checkBox>
            </mat-form-field>
          </div>
        </div>
        <div fxLayout="row">
          <button
              fxFlex="100"
              mat-raised-button
              color="primary"
              (click)="save()"
          >
              Save Changes
          </button>
      </div>
    </div>
  </div>
</div>

该表单工作正常，我也能够从中获取数据。这是它的样子

这是我初始化它的方式

 createCombinations() {
    let arrayOfData = [];
    arrayOfData.push({
      volumeSlabType: this.combinationSelectionForm.value.volumeSlab,serviceType: this.combinationSelectionForm.value.serviceType,weightSlab: this.combinationSelectionForm.value.weightSlab,region: this.getRegionsCombinations(this.combinationSelectionForm.value.region)
    });

    this.data = arrayOfData;
    this.data[0].region.forEach((reg,i) => {
      const fArray = this.combinationForm.get("dest") as FormArray;
      fArray.push(this.createForm(reg,i));
    });
    console.log(this.data);
  }

  createForm(dest: any,index): FormGroup {
    let group: FormGroup;

    if(this.data) {
      group = this._fb.group({
        combinationTitle: [dest.combinationTitle],regionId: [dest.regionId],price: [],isActive: [false],});
    }
    return group;
  }

  getFormData(data): FormGroup {
    return data[0].region;
  }

  getRegionsCombinations(region) {
    let selectedRegion: IRegion[] = this.regions.filter((data) => data.id === region);
    let regionCombination = [];
    this.regions.forEach((region) => {
      this.regions.forEach((rData) => {
        regionCombination.push({
          combinationTitle: `${region.name} - ${rData.name}`,regionId: rData.id,price: 0
        });
      });
    });
    return regionCombination;
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）