Form data disappears when requested a second time

Question

I hope I can explain the complexity of the problem. In the first request I make the form sends correctly and the data is filled in, as shown in the image below.

But when I try again to send the form with new information the form is empty, as in the image below.

First I send this information in HTML

Cart-button.html

  <form (ngSubmit)="agreeCart()">
        <ion-card>
            <ion-card-header style="background: #5474B3;" text-center>
                <span text-center style="color: #ffffff!important;"> Forma de Entrega do Ingresso</span>
            </ion-card-header>
            <ion-list radio-group name="radio" [(ngModel)]="formaEntregaSelecionada">
                <ion-item *ngFor="let fP of formaEntregaArray">
                    <ion-radio [value]="fP.type" item-left (ionSelect)="onChangeEntrega(fP)"></ion-radio>
                    <ion-label class="myCustomSelect">{{ fP.value }}</ion-label>
                </ion-item>
            </ion-list>
        </ion-card>

        <ion-card>
            <ion-card-header style="background: #5474B3;" text-center>
                <span text-center style="color: #ffffff!important;"> Forma de Pagamento</span>
            </ion-card-header>
            <ion-list radio-group name="radio" [(ngModel)]="formaPagamentoSelecionada">
                <ion-item *ngFor="let fP of formaArray" >
                    <ion-radio  [value]="fP.type" item-left (ionSelect)="onChange(fP)"></ion-radio>
                    <ion-label class="myCustomSelect">{{ fP.value }}</ion-label>
                </ion-item>
                <div class="validation-errors">
                    <ng-container *ngIf="errorSubscribe != null">
                        <div class="error-message">
                            {{ errorSubscribe.formaPagamento }}
                        </div>
                    </ng-container>
                </div>
            </ion-list>
        </ion-card>

        <form action="" method="post" name="pay" id="form">
            <ion-card *ngIf="openCard == true">
                <ion-row hidden>
                    <ion-item>
                        <ion-label text-center></ion-label>
                        <ion-input id="email" name="email" value="{{ email }}" type="email"></ion-input>
                    </ion-item>
                </ion-row>
                <ion-row hidden>
                    <ion-label for="docType">Document type:</ion-label>
                    <select id="docType" data-checkout="docType"></select>
                </ion-row>
                <ion-row hidden>
                    <ion-label text-center></ion-label>
                    <ion-item>
                        <ion-input type="text" id="docNumber" data-checkout="docNumber" placeholder="12345678" value="{{ cpfMercadoPago }}"></ion-input>
                    </ion-item>
                </ion-row>
                <ion-row>
                    <ion-item>
                        <!--Forma super errada de fazer uma funcao de verificacao-->
                        <ion-icon style="width: 30px;padding-top:10px;" item-start>
                            <ion-icon name="ios-card" *ngIf="showIcon == null" color="ticket-blue-rainbow"></ion-icon>
                        </ion-icon>
                        <ion-label stacked> Numero Cartão</ion-label>
                        <ion-input  type="tel"  placeholder="Ex:0000 0000 0000 0000" id="cardNumber" data-checkout="cardNumber" [brmasker]="{mask: '0000 0000 0000 0000', len:19}" [(ngModel)]="nmCartao" [ngModelOptions]="{standalone: true}" (ionChange)="runTimeChange(nmCartao)"
                                    placeholder="4509 9535 6623 3704" onselectstart="return false" onpaste="return false"
                                    onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false"
                                    autocomplete=off></ion-input>
                    </ion-item>
                </ion-row>
                <ion-row>
                    <ion-item>
                        <ion-icon name="ios-person" item-start color="ticket-blue-rainbow"></ion-icon>
                        <ion-label stacked> Titular do Cartão</ion-label>
                        <ion-input placeholder="Ex: Péttrin Nazario Paulo" id="cardholderName" data-checkout="cardholderName" [(ngModel)]="titular" [ngModelOptions]="{standalone:true}" ></ion-input>
                    </ion-item>
                    <div class="validation-errors">
                        <ng-container *ngIf="errorSubscribe != null">
                            <div class="error-message">
                                {{ errorSubscribe.titular }}
                            </div>
                        </ng-container>
                    </div>
                </ion-row>
                <ion-row>
                    <ion-item>
                        <ion-icon name="ios-cart" item-start color="ticket-blue-rainbow"></ion-icon>
                        <ion-label stacked> Codigo de Seguranca</ion-label>
                        <ion-icon name="asterisk"></ion-icon>
                        <ion-input  type="number" [brmasker]="{mask: '0000', len:4}" id="securityCode" data-checkout="securityCode" [(ngModel)]="codSeguranca" [ngModelOptions]="{standalone:true}" placeholder="123"
                                    onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false"
                                    onDrag="return false" onDrop="return false" autocomplete=off></ion-input>
                    </ion-item>
                </ion-row>
                <ion-grid>
                    <ion-label text-center> Vencimento Cartao</ion-label>
                    <ion-row>
                        <ion-col>
                            <ion-item>
                                <ion-label stacked> Mes</ion-label>
                                <ion-input  type="number" min="0" max="12" id="cardExpirationMonth" data-checkout="cardExpirationMonth" placeholder="12" [(ngModel)]="month" [ngModelOptions]="{standalone:true}" [brmasker]="{mask: '00', len:2}" placeholder="12"
                                            onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false"
                                            onDrag="return false" onDrop="return false" autocomplete=off></ion-input>
                            </ion-item>
                        </ion-col>
                        <ion-col>
                            <ion-item>
                                <ion-label stacked> Ano</ion-label>
                                <ion-input  type="number" min="1901" max="2035" id="cardExpirationYear" data-checkout="cardExpirationYear" placeholder="18" [(ngModel)]="year" [ngModelOptions]="{standalone:true}" [brmasker]="{mask: '00', len:2}"
                                            onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false"
                                            onDrag="return false" onDrop="return false" autocomplete=off></ion-input>
                            </ion-item>
                        </ion-col>
                    </ion-row>
                    <ion-item>
                        <ion-label floating color="primary" interface="popover">Opções de Parcelamento</ion-label>
                        <ion-icon name="pricetags"></ion-icon>
                        <ion-select class="myCustomSelect" [(ngModel)]="formaVezes" [ngModelOptions]="{standalone:true}">
                            <ion-option *ngFor="let p of parcelamentosArray" [value]="p.type"> {{ p.value}} </ion-option>
                        </ion-select>
                    </ion-item>
                </ion-grid>
                <div class="validation-errors">
                    <ng-container *ngIf="errorSubscribe != null">
                        <div class="error-message">
                            {{ errorSubscribe.parcelamento }}
                        </div>
                    </ng-container>
                </div>
            </ion-card>
        </form>
        <!--/ Fim do formulario de cartao-->


        <button class="button" ion-button block *ngIf="cart.moipPublicKey != null" (click)="subscribeMoip()" color="dark">Finalizar Compra</button>
        <button class="button" ion-button block *ngIf="cart.mercadoPagoPublicKey != null" (click)="subscribeMercadoPago()" color="dark">Finalizar Compra</button>
    </form>

When I click on Finalizar Compra 2 methods are called, the first would be <form (ngSubmit)="agreeCart()">(at the beginning of the form), while this method is called

agreeCart() {
        let alert = this._alertCtrl.create({
            title: "Confirmação",
            message: "Desejar confirmar compra?",
            buttons: [
                {
                    text: "Sim",
                    handler: value => {
                        this.onTapBuyCart();
                    }
                },
                {
                    text: "Não",
                    handler: value => {}
                }
            ]
        });
        alert.present();
    }

A second function is called, in it a token is created through the (click)="subscribeMercadoPago()"

public subscribeMercadoPago() {
        console.log(Mercadopago);
        Mercadopago.setPublishableKey("TEST-XXXX-XXXX-XXXX-SECRET");
        Mercadopago.getIdentificationTypes();
        Mercadopago.getPaymentMethod({"bin": '5555'}, function (status, response) {
            console.log("status: "+status);
            console.log("response: "+response[0].id);
        });
        let form = document.querySelector('#form');
        console.log(form);
        let _self = this;
        Mercadopago.createToken(form, function (status, response) {
            console.log("status token: "+status);
            console.log("hash", response.id);
            console.log(response);
            _self.hashCartao = response.id;
            console.log(_self.hashCartao + ' VALIDO');
        });
    }

In short, while I run the first function a second is called to create a token.

If the user accepts the first option of the function agreeCart it is redirected to another function,

 public cartPay() {
    this._cartProvider
         .payCartButtonMercadoPago(
             this.formaPagamentoSelecionada,
             this.titular,
             this.formaVezes,
             this.hashCartao
         )
         .subscribe(
             (cart: any) => {
                 loader.dismiss();
                 this.navCtrl.setRoot(SucessCartPage, { cart });
             },
             error1 => {
                 var arr = Object.keys(error1.error.errors).map(key => ({
                     type: key,
                     value: error1.error.errors[key]
                 }));
                 this.errorSubscribe = error1.error.errors;
                 this.errorJson = arr;
                 console.log(error1);
                 loader.dismiss();
                 let toast = this._toastCtrl.create({ message: "Ocorreu um erro" , duration:3000 });
                 toast.present();
                 Mercadopago.clearSession();
             }
         );
 }

This last function sends data along with the token that was created by the Html + subscribe mercadoPago(){} and send to Api(End of code).

Finally, the big question is, why is the information not passed by html the second time it is requested? Notice that you have a line in the first image that looks like this

<!--bindings={
  "ng-reflect-ng-if:"true"}-->

in the second picture the line already gets false...

Answer 1

Let’s say the problem was the cache that was saved on the page, I called this page from a ion-tab.

<ion-tabs color="ticket-blue-rainbow">
    <ion-tab [root]="paginaInicialRoot" tabTitle="Inicio" tabIcon="ios-home-outline" [tabsHideOnSubPages]="true"></ion-tab>
    <ion-tab [root]="searchRoot" tabTitle="Procurar evento" tabIcon="ios-search-outline" [tabsHideOnSubPages]="true"></ion-tab>
    <ion-tab [root]="ingressoRoot"  tabTitle="Ingressos" tabIcon="ios-card-outline"  [tabsHideOnSubPages]="true"></ion-tab>
    <ion-tab [root]="carrinhoRoot" tabTitle="Carrinho" tabIcon="ios-cart-outline" [tabsHideOnSubPages]="true"></ion-tab>
    <ion-tab [root]="perfilRoot" tabTitle="Perfil" tabIcon="ios-people-outline" [tabsHideOnSubPages]="true"></ion-tab>
</ion-tabs>

That tab used to call my cart

<ion-tab [root]="carrinhoRoot" tabTitle="Carrinho" tabIcon="ios-cart-outline" [tabsHideOnSubPages]="true"></ion-tab>

Calling the cart through the ion-tab somehow was stored the form data(I don’t wonder how, it’s things from Ionic by running in a Webview).

I removed the ion-tab cart and now I’m calling it through a button that when requested uses this function

 public goToCart(){
        this.navCtrl.push(CartButtonPage);
    }

In short, with NavCtrl.push the cart works normally, already with ion-tab does not perform properly.

Answer 2

<ion-card *ngIf="openCard == true">

The problem appears to be this if, check if at any time the openCard variable has its value exchanged.

To be sure what the value arrives in this variable of a console.log in it.