Angular8响应式表单中如何按独立头部分组绑定业务线数据

第一步：修改TS逻辑 #

修复原有getOpportunitiesList方法的逻辑错误，同时存储分组信息用于前端展示：

// 新增变量存储分组数据
public groupedOpportunities: Array<{groupName: string, items: any[]}> = [];

private getOpportunitiesList() {
  // 清空原有表单数组
  if (this.opportunitesx && this.opportunitesx.controls) {
    this.opportunitesx.clear();
  }
  this.groupedOpportunities = [];
  
  // 遍历所有业务线分组
  Object.keys(this.data.businessLineGroup).forEach(groupName => {
    const groupItems = this.data.businessLineGroup[groupName];
    // 处理当前分组下的所有条目
    const processedItems = groupItems.map(item => {
      // 格式化报价数
      if (item.quoteCount) {
        item.quoteCount = new Intl.NumberFormat().format(item.quoteCount);
      }
      item.isEdit = false;
      // 创建表单组
      const formGroup = this.createOpportunityInformation();
      formGroup.get('competitorId').setValue(item.competitorId);
      formGroup.get('competitorId').disable();
      formGroup.get('quoteCount').setValue(item.quoteCount);
      formGroup.get('quoteCount').disable();
      formGroup.get('policyCount').setValue(item.policyCount);
      formGroup.get('policyCount').disable();
      formGroup.get('writtenPremium').setValue(item.writtenPremium);
      formGroup.get('writtenPremium').disable();
      formGroup.get('isTrack').setValue(item.isTrack);
      formGroup.get('isEdit').setValue(false);
      formGroup.get('isTrack').disable();
      formGroup.get('id').setValue(item.id);
      formGroup.get('id').disable();
      this.opportunitesx.push(formGroup);
      return item;
    });
    // 保存分组信息
    this.groupedOpportunities.push({
      groupName: groupName,
      items: processedItems
    });
  });
  this.preventOpportunityEmpty();
}

第二步：新增索引计算方法 #

在TS中新增方法用来计算每个条目对应的表单数组索引：

public getFormIndex(groupIndex: number, itemIndex: number): number {
  let index = 0;
  for (let i = 0; i < groupIndex; i++) {
    index += this.groupedOpportunities[i].items.length;
  }
  return index + itemIndex;
}

第三步：调整HTML实现分组展示 #

修改tbody部分的逻辑，先输出分组标题，再输出对应分组下的行数据：

<tbody formArrayName="opportunitesx">
  <!-- 遍历所有分组 -->
  <ng-container *ngFor="let group of groupedOpportunities; let groupIndex = index">
    <!-- 分组标题行 -->
    <tr class="table-secondary">
      <td colspan="7" class="font-weight-bold">
        {{ group.groupName }}
      </td>
    </tr>
    <!-- 遍历当前分组下的所有条目 -->
    <ng-container *ngFor="let item of group.items; let itemIndex = index">
      <tr 
        [formGroupName]="getFormIndex(groupIndex, itemIndex)"
      >
        <td class="width25">
          <span *ngIf="opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].competitorId.value">
            <i
              (mouseenter)="onOpenCompetitorDetails(item)"
              id="competitorInfo"
              class="fa fa-info-circle info-font-size"
            ></i>
          </span>
        </td>
        <td class="width250">
          <select
            class="custom-select drop"
            formControlName="competitorId"
            [ngClass]="{
              'is-invalid':
                submitted &&
                opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].competitorId.errors
            }"
            id="competitorId"
          >
            <option disabled="" value="">Choose Competitor</option>
            <option
              *ngFor="let competitor of competitorDropdown"
              [value]="competitor.id"
              title="competitor.value"
            >
              {{ competitor.value }}
            </option>
          </select>
          <div
            *ngIf="
              submitted &&
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].competitorId.errors
            "
            class="invalid-feedback"
          >
            <div
              *ngIf="
                opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].competitorId.errors
                  .required
              "
            >
              Competitor is required
            </div>
          </div>
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            placeholder="Quote Count"
            formControlName="quoteCount"
            maxlength="4"
          />
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            placeholder="Policy Count"
            formControlName="policyCount"
            allowNumberOnly
            maxlength="4"
          />
        </td>
        <td class="width165">
          <input
            type="text"
            class="form-control"
            placeholder="Written Premium"
            formControlName="writtenPremium"
          />
        </td>
        <td>
          <input
            type="checkbox"
            style="width: auto;"
            formControlName="isTrack"
          />
        </td>
        <td class="width125">
          <button
            class="btn btn-outline-primary btn-table"
            title="Close"
            (click)="clearOpportunity(getFormIndex(groupIndex, itemIndex), opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'])"
            *ngIf="
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].isEdit.value ||
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].id.value == 0
            "
          >
            Close
          </button>
          <button
            class="btn btn-outline-primary btn-table ml-1"
            title="Edit"
            (click)="
              editOpportunityDetails(getFormIndex(groupIndex, itemIndex), opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'])
            "
            *ngIf="
              !opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].isEdit.value &&
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].id.value > 0
            "
          >
            Edit
          </button>
          <button
            class="btn btn-outline-primary btn-table ml-1"
            title="Save"
            type="button"
            *ngIf="
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].isEdit.value ||
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].id.value == 0
            "
            [disabled]="!this.opportunitesx.controls[getFormIndex(groupIndex, itemIndex)].dirty"
            (click)="saveOpportunityDetails(getFormIndex(groupIndex, itemIndex))"
          >
            Save
          </button>
          <button
            class="btn btn-outline-primary btn-table ml-1"
            title="Delete"
            *ngIf="opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].id.value > 0"
            [disabled]="
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].isEdit.value &&
              opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'].id.value > 0
            "
            type="button"
            (click)="
              deleteOpportunityDetails(getFormIndex(groupIndex, itemIndex), opportunitesx.controls[getFormIndex(groupIndex, itemIndex)]['controls'])
            "
          >
            Delete
          </button>
        </td>
      </tr>
    </ng-container>
  </ng-container>
</tbody>

内容的提问来源于stack exchange，提问作者Bhrungarajni