0

Espero que eu consiga explicar a complexidade do problema. Na primeira requisição que eu faço o formulário envia corretamente e os dados são preenchidos, como mostra na imagem abaixo.

Formulario enviado

Porém quando eu tento novamente enviar o formulário com novas informações o formulário fica vazio, como na imagem abaixo.

Formulario com erro

Primeiro eu envio essas informaçōes no 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>

Quando eu clico em Finalizar Compra 2 metodos são chamados, o primeiro seria <form (ngSubmit)="agreeCart()">(no Começo do formulário), enquanto esse metodo é chamado

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();
    }

Uma segunda funcao é chamada, nela é criado um token através do (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');
        });
    }

Resumindo, enquanto eu executo a primeira função uma segunda é chamada para criar um token.

Caso o usuário aceite a primeira opção da função agreeCart ele é redirecionado para outra função,

 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();
             }
         );
 }

Essa ultima função envia dados junto com o token que foi criado pelo o Html + subscribe mercadoPago(){} e manda para a Api(Final do codigo).

Por fim, a grande pergunta é, porque as informaçoes não são passadas pelo html na 2 vez que é requisitado? Notasse que possui uma linha na primeira imagem que fica assim

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

na segunda imagem a linha ja recebe false...

2 Respostas 2

1

Digamos que o problema era o cache que ficava salvo na pagina, eu chamava essa pagina a partir de um 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>

Essa tab chamava meu carrinho

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

Chamando o carrinho através do ion-tab de alguma maneira ficava armazenada os dados do formulário(não me pergunto como, são coisas do ionic por rodar em uma WebView).

Retirei o carrinho do ion-tab e agora estou chamando ele atraves de um botão que quando requisitado usa essa função

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

Resumindo, com NavCtrl.push o carrinho funciona normalmente, já com ion-tab não executa de maneira adequada.

0

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

O problema aparenta ser aqui esse if, verifique se em algum momento a variavel openCard tem seu valor trocado.

Para ter certeza qual o valor chega nessa variavel de um console.log nela

1
  • Queria que esse fosse o erro, porem mesmo quando eu retiro essa exceção o erro continua Commented 18/01/2019 às 11:58

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .