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.
Porém quando eu tento novamente enviar o formulário com novas informações o formulário fica vazio, como na imagem abaixo.
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...