0

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 .

3
  • 1
    si en el lado de la vista o en el lado de html no usas formControlName, angular nunca sabrá que tus campos de cardNumber, cardCvv y cardExp se habrán llenado o completado. Por eso no se habilita tu botón.
    – esphinx
    Commented el 9 oct. 2023 a las 2:57
  • Podemos empezar por consultar la documentación para ver como usar formularios reactivos, ya que hasta ahora solo tienes cosas declaradas pero no las estas usando Angular - Reactive Forms
    – René
    Commented el 9 oct. 2023 a las 17:00
  • @esphinx El problema es que si que se habilita, pero cuando vuelvo a hacer clic sobre los campos ya rellenos. hago nuevamente clic en el campo de cardNumber por ejemplo y entonces se habilita el botón, eso es lo que me trae de cabeza
    – GlebBrovar
    Commented el 12 oct. 2023 a las 13:23

1 respuesta 1

0

Ya encontré una solución. Por si ha alguien le puede ayudar para el futuro. La solución llegó con el uso de ChangeDetectorRef

una vez implementado, se asigna a una variable en el constructor. private cd: ChangeDetectorRef,

Por ultimo en la parte del código encargada de los manejadores de validación se integra de la siguiente manera:

    //TODO: Manejadores de validacion de input de stripe
  onChangeCard({ error }: any) {
    this.form.patchValue({ cardNumber: !error });
    this.cd.detectChanges();
  }

  onChangeCvv({ error }: any) {
    this.form.patchValue({ cardCvv: !error });
    this.cd.detectChanges();
  }

  onChangeExp({ error }: any) {
    this.form.patchValue({ cardExp: !error });
    this.cd.detectChanges();
  }

Espero que si alguien tiene un problema parecido le sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.