添加条纹卡后重置 StripeCardComponent

Question

我将 StripeCardComponent 与 ngx-stripe 一起使用。你知道添加Stripe卡后如何重置表单吗？

<ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions" (change)="cardUpdated($event)" (error)="error = $event"></ngx-stripe-card>
<div class="error">
  {{error?.message}}
</div>
<button (click)="getCardToken()" [disabled]="!complete">Get Card Token</button>

我试过如下。但它不起作用。

addcard(){
 (document.querySelector('.ElementsApp') as HTMLFormElement).reset();
}

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'reset' of null TypeError: Cannot read property 'reset' of null

运行次Html

Answer 1

我找到了解决方案。这很好用。

addCard(){
    this.element.clear();
}

Answer 2

更复杂的方式：

将 ngx-stripe 的 html 元素发送到您的函数并重置它

HTML:

<ngx-stripe-card [options]="cardOptions" [elementsOptions]="elementsOptions" (change)="cardUpdated($event)"
#myStripeElement
 ></ngx-stripe-card>

<button (click)="clearForm(myStripeElement)">Clear form</button>

组件：

clearForm(myStripeElement:any) {
    myStripeElement.element.clear()
}