angular - 如何使用 Angular8 响应式表单一次添加/编辑一行

Question

我正在使用 angular8 反应形式，在此我需要进行内联编辑和添加。应一次添加和编辑一个。现在，我可以一次添加多个记录并添加多个新记录。最初对于现有记录，仅显示编辑按钮，当单击编辑时，它必须替换为保存按钮，并且对于添加新模式，不应显示编辑按钮。我已经尝试了许多步骤，并且还添加了我的工作副本的演示。

HTML：

<tbody formArrayName="opportunitesx">
                <tr *ngFor="let item of opportunitiesForm.get('opportunitesx')['controls']; let i = index;"
                  [formGroupName]="i">
                  <td>&nbsp;</td>
                  <td>
                    {{opportunitiesForm.get('opportunitesx')['controls']['competitorId']}}
                    <select class="custom-select drop" formControlName="competitorId">
                                        <option selected="" disabled="">Choose Competitor</option>
                                        <option value="1">Lloyd's - TPI - Owners - Alabama</option>
                                        <option value="2">Argenia - Dwelling - Owners - Alabama</option>
                                        <option value="3">Lloyd's - Foremost - Dwelling - Alabama</option>
                                    </select>
                  </td>
                  <td>
                    <input type="text" class="form-control" placeholder="Quote Count"
                                        formControlName="quoteCount" allowNumberOnly maxlength="4">
                  </td>
                  <td>
                    <input type="text" class="form-control" placeholder="Policy Count"
                                        formControlName="policyCount" allowNumberOnly maxlength="4">
                  </td>
                  <td>
                    <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="Edit" (click)="editOpportunityDetails(i)" [disabled]="valuationModel.isEditValue && valuationModel.isEditValue != i"
                                        >Edit</button>
                    <button class="btn btn-outline-primary btn-table  ml-1" title="Save"
                                        type="button" [disabled]="valuationModel.isEditValue && valuationModel.isEditValue != i" (click)="saveOpportunityDetails(i)">Save</button>
                    <button class="btn btn-outline-primary btn-table ml-1" title="Delete"
                                        type="button" (click)="deleteOpportunityDetails(i)" [disabled]="valuationModel.isEditValue && valuationModel.isEditValue != i">Delete</button>
                  </td>
                </tr>
              </tbody>

TS：

private getOpportunitiesList() {
    this.valuationModel.opportunityList = this.userListDetails;
    this.opportunitesx.controls = [];
    for (let lang of this.valuationModel.opportunityList) {
      let group = this.createOpportunityInformation();
      group.get('competitorId').setValue(lang.competitorId);
      group.get('competitorId').disable();
      group.get('quoteCount').setValue(lang.quoteCount);
      group.get('quoteCount').disable();
      group.get('policyCount').setValue(lang.policyCount);
      group.get('policyCount').disable();
      group.get('writtenPremium').setValue(lang.writtenPremium);
      group.get('writtenPremium').disable();
      group.get('isTrack').setValue(lang.isTrack);
      group.get('isTrack').disable();
      group.get('Id').setValue(lang.Id);
      group.get('Id').disable();
      this.opportunitesx.push(group);
    }
    this.preventOpportunityEmpty();
  }

  public addOpportunityDetails() {
    this.opportunitesx.push(this.createOpportunityInformation());
  }

  public deleteOpportunityDetails(i) {
    this.opportunitesx.removeAt(i);
  }

  public editOpportunityDetails(i, event) {
    this.valuationModel.isEdit = false;
    this.valuationModel.isEditValue = i;
    this.opportunitesx.controls[i].enable();
    this.opportunitesx.controls[i]['controls']['competitorId'].disable();
  }

演示

标签： angularangular-reactive-formsreactiveinline-editing