Ng-Repeat with Ng-Sumit

I need the information I select to be copied below when I press the add button.

<ion-content padding>

    <ion-grid>
      <ion-row>

        <ion-col col-3>
          <button ion-button color="secondary" icon-start><ion-icon name="add" ></ion-icon>Agregar</button>
        </ion-col>


        <ion-col col-1>
          <button ion-button color="secondary" icon-only><ion-icon name="search"></ion-icon></button>
        </ion-col>


        <ion-col col-8> 
          <ion-item> 
            <ion-label>Productos</ion-label> 
            <ion-select [(ngModel)]="ProductoSelec" (ionChange)="CambioProducto()" FormControlName="Producto"> 
              <ion-option *ngFor="let p of productos" value="{{jsonStringify(p)}}">{{p.i}} | {{p.p}}</ion-option> 
            </ion-select> 
          </ion-item> 
        </ion-col> 


        <ion-col col-6> 
          <ion-item> 
            <ion-label>Paquete</ion-label> 
            <ion-select [(ngModel)]="PaqueteSelec" (ionChange)="CambioPaquete()" FormControlName="Paquete"> 
              <ion-option *ngFor="let p of Paquetes" value={{p.p}} #Paquete>{{p.u}} - {{p.p}}</ion-option> 
            </ion-select> 
          </ion-item> 
        </ion-col> 


        <ion-col col-6>
          <ion-item>
            <ion-input [(ngModel)]="Cantidad" type="tel" placeholder="Cantidad" min="0" icon #cantidad></ion-input>
          </ion-item>
        </ion-col>

        </ion-row>
    </ion-grid>

    <ion-grid>
      <ion-row>
        <ion-col col-1 text-center><b>#</b></ion-col>
        <ion-col col-2 text-center><b>Cod.</b></ion-col>
        <ion-col col-3 text-center><b>Producto</b></ion-col>
        <ion-col col-1 text-center><b>Cnt.</b></ion-col>
        <ion-col col-1 text-center><b>Und.</b></ion-col>
        <ion-col col-3 text-center><b>Precio</b></ion-col>
        <ion-col col-1 text-center></ion-col>
      </ion-row>  
    </ion-grid>

    <ion-grid ng-show="compraData.legth > 0"> 
      <ion-row ng-repeat="item in Compra; let i = index"> 
        <ion-col col-1 text-center>{{i+1}}</ion-col> 
        <ion-col col-2 text-center>{{ProductoSelec}}</ion-col> 
        <ion-col col-3 text-center>{{ProductoSelec}}</ion-col> 
        <ion-col col-1 text-center>{{Cantidad}}</ion-col> 
        <ion-col col-2 text-center>{{PaqueteSelec | currency}}</ion-col> 
        <ion-col col-2 text-center>{{Cantidad * PaqueteSelec | currency : "$ "}}</ion-col> 
        <ion-col col-1 text-center><button clear ng-click="remove($index)">X</button></ion-col> 
        </ion-row> 
    </ion-grid> 

    
    <ion-grid>
      <ion-row>
        <ion-col col-8 text-left><b>Total Compra:</b></ion-col>
        <ion-col col-4 text-center><b>{{Cantidad * PaqueteSelec | currency: "DOP "}}</b></ion-col>
      </ion-row>
    </ion-grid>

    <button ion-button full color="secondary" (click)=AgregarBonificacion()>Agregar Bonificacion</button>

</ion-content>

I’m not sure what you are asking, but you do not want both [(ngModel)] and a FormControl. Pick only one. Also, I would lose either (ionChange) or the banana binding on (ngModel) (if you keep ngModel at all), unless you are very careful to make sure that CambioProducto() (which should be cambioProducto()) has no side effects that could modify the bound model.