En mi aplicacion angular tengo un componente para realizar el pago. He hecho la integración con stripe. Estoy usando un formulario reactivo angular.
Mi problema Necesito que el boton de pagar se habilite una vez rellenos los campos del formulario. El problema es que por algun motivo no lo hace de forma automática. Una vez que relleno los campos el boton sigue deshabitado , pero cuando hago clic en los campos otra vez , entonces se habilita el boton. Esto resulta bastante confuso he incomodo.
Este es mi component.ts:
ngOnInit(): void {
this.form = this.fb.group({
cardNumber: [false, [Validators.required, Validators.requiredTrue]], //TODO true | false
cardCvv: [false, [Validators.required, Validators.requiredTrue]],//TODO true | false
cardExp: [false, [Validators.required, Validators.requiredTrue]],//TODO true | false
});
this.createCardElement();
}
createCardElement() {
const cardNumber = elements.create('cardNumber', {
placeholder: '0000 0000 0000 0000',
style,
classes: {
base: 'input-stripe-custom'
},
});
const cardExp = elements.create('cardExpiry', {
placeholder: 'MM/AA',
style,
classes: {
base: 'input-stripe-custom'
},
});
const cardCvc = elements.create('cardCvc', {
placeholder: '000',
style,
classes: {
base: 'input-stripe-custom'
},
});
//TODO: SDK Montamos los elementos en nuestros DIV identificados on el #id
cardNumber.mount('#card');
cardExp.mount('#exp');
cardCvc.mount('#cvc');
this.cardNumber = cardNumber;
this.cardExp = cardExp;
this.cardCvv = cardCvc;
//TODO: Escuchamos los eventos del SDK
this.cardNumber.addEventListener('change', this.onChangeCard.bind(this));
this.cardExp.addEventListener('change', this.onChangeExp.bind(this));
this.cardCvv.addEventListener('change', this.onChangeCvv.bind(this));
}
//TODO: Manejadores de validacion de input de stripe
onChangeCard({ error }: any) {
this.form.patchValue({ cardNumber: !error });
}
onChangeCvv({ error }: any) {
this.form.patchValue({ cardCvv: !error });
}
onChangeExp({ error }: any) {
this.form.patchValue({ cardExp: !error });
}
Y este es mi formulario html:
<form class="text-black-50" action="" [formGroup]="form" (submit)="onClick()">
<div class="mb-2">
<label class="form-label mb-1">Número de tarjeta</label>
<div class="input-card" id="card"></div>
</div>
<div class="row g-3">
<div class="mb-2 col">
<label class="form-label mb-1">CVC</label>
<div class="input-card" id="cvc"></div>
</div>
<div class="mb-2 col">
<label class="form-label mb-1">Expiración</label>
<div class="input-card" id="exp"></div>
</div>
</div>
<div class="d-grid gap-2 ">
<button [disabled]="form.invalid || form.disabled" class="btn btn-primary mt-3"
type="submit">Pagar</button>
</div>
</form>
Me gustaria que una vez completados los campos se activara el botón de pagar automáticamente.
Gracias de antemano .