如何在点击Add new with angular8 Reactive Forms时将新行置于首位 [英] How to bring new row to top when clicked on add new using angular8 reactive forms

问题描述

单击Add New按钮时，我使用角度8的反应表单来绑定数据并添加新行，但在这里，当我单击Add New按钮时，新输入行将显示在编辑部分的底部，但我希望它显示在Add New按钮的正下方，我还附上了演示。

HTML：

<button
    type="button"
    class="btn btn-outline-primary switchView active"
    (click)="addOpportunityDetails()"
  >
    <i class="fas fa-plus"></i> Add new
  </button>

 <form [formGroup]="opportunitiesForm" *ngIf="opportunitiesForm">
    <ng-container formArrayName="opportunitesx">
      <div
        class="row mt-5"
        *ngFor="
          let item of opportunitiesForm.get('opportunitesx')['controls'];
          let i = index
        "
        [formGroupName]="i"
      >
        <div class="col-md-12" *ngIf="item.get('showHeader').value">
          {{ item.get('header').value }}
        </div>

        <div class="col-3">
          <input
            type="text"
            class="form-control"
            placeholder="Quote Count"
            formControlName="quoteCount"
            maxlength="4"
          />
        </div>

        <div class="col-3">
          <input
            type="text"
            class="form-control"
            placeholder="Policy Count"
            formControlName="policyCount"
            allowNumberOnly
            maxlength="4"
          />
        </div>

        <div class="col-3">
          <input
            type="text"
            class="form-control"
            placeholder="Written Premium"
            formControlName="writtenPremium"
          />
        </div>
      </div>
    </ng-container>
  </form>

ts：

public addOpportunityDetails() {
    this.opportunitesx.push(this.createOpportunityInformation());
    this.isEditValue = this.opportunitesx ? this.opportunitesx.length : 0;
  }

Demo

推荐答案

可以使用unshift方法。但是，它不能直接在formArray上使用。为此，您需要使用formArray.controls。

public addOpportunityDetails() {
    this.opportunitesx.controls.unshift(this.createOpportunityInformation());
    this.isEditValue = this.opportunitesx ? this.opportunitesx.length : 0;
  }

参考资料：- https://angular.io/api/forms/FormArray

这篇关于如何在点击Add new with angular8 Reactive Forms时将新行置于首位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！