How to bring new row to top when clicked on add new using angular8 reactive forms-CodePudding

I am using angular8 reactive forms for binding data and adding a new row when click of add new button, but here when i click on add new button, the new inputs row is going at the bottom of the edit section, but i want that to be present just below the add new button, i have attached demo as well.

HTML:

<button
    type="button"
    
    (click)="addOpportunityDetails()"
  >
    <i ></i> Add new
  </button>

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

        <div >
          <input
            type="text"
            
            placeholder="Quote Count"
            formControlName="quoteCount"
            maxlength="4"
          />
        </div>

        <div >
          <input
            type="text"
            
            placeholder="Policy Count"
            formControlName="policyCount"
            allowNumberOnly
            maxlength="4"
          />
        </div>

        <div >
          <input
            type="text"
            
            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

CodePudding user response：

You can use unshift method for that. However it is not available directly on formArray. For that you need to use formArray.controls.

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

References:- https://angular.io/api/forms/FormArray