在角度应用程序中重置谷歌验证码？

Question

我在一个有角度的项目中使用谷歌的 recaptcha，它按预期工作，但我不知道如何重置它。

我有一个用户发送数据的表单，我希望在从表单成功发布后重置表单，以便用户可以发送另一封邮件。

在我的控制器中，我有以下方法：

 var resetForm = function () {
   //reset my models
   //reset my flags

   //here I would like to reset the recaptcha

}

如何从角度控制器内部的函数执行此操作？

Answer 1

如果您使用的是版本1

Recaptcha.reload();

如果您使用的是版本2

grecaptcha.reset();

通过选择器：

jQuery('#recaptcha_reload').click();

Answer 2

使用

grecaptca

在 .ts 中不起作用，我们需要通过 @viewChild 使用其模板引用 (#) 来读取组件实例。

第 1 步： 导入

import {NgxCaptchaModule,ReCaptcha2Component} from 'ngx-captcha';

第 2 步： 阅读模板参考

@ViewChild('captchaElem') captchaElem: ReCaptcha2Component;

第 3 步： 读取组件以重置/重新加载

this.captchaElem.resetCaptcha();

您可以使用像

isCaptcaSuccess

这样的布尔值来检查您的验证码是否有效。您可以在handleExpire、handleSuccess事件中设置值。

NGX验证码

<ngx-recaptcha2 #captchaElem
   [siteKey]="siteKey"
   (reset)="handleReset()"
   (expire)="handleExpire()"
   (error)="handleError()"
   (load)="handleLoad()"
   (success)="handleSuccess($event)" >
</ngx-recaptcha2>

Answer 3

使用

Recaptcha.reload();

重新加载验证码。

Answer 4

使用 Angular 中的 ng-recaptcha 重置 recaptcha v2

第 1 步： 将模板引用 (#reCaptcha) 添加到“重新验证码”选择器

<re-captcha #reCaptcha ...more_options_here...> </re-captcha>

第2步：更新*.ts文件

1. 添加导入

import { RecaptchaComponent } from 'ng-recaptcha';

2. 添加@ViewChild并添加重置处理程序

 @ViewChild('reCaptcha') reCaptcha!: RecaptchaComponent;

resetReCaptcha(): void {
  this.reCaptcha.reset();
}

更多信息请参阅官方文档：

https://www.npmjs.com/package/ng-recaptcha#methods

https://stackblitz.com/edit/ng-recaptcha-example