I'm using google's recaptcha in an angular project, it works as expected but I can't figure out how to reset it.

I have a form in which the user sends data and I would like after a successful post from the form to reset the form so that the user can send another mail.

In my controller I have the following method:

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

   //here I would like to reset the recaptcha

}

How can I do this from a function that is inside an angular controller ?

I'm using google's recaptcha in an angular project, it works as expected but I can't figure out how to reset it.

I have a form in which the user sends data and I would like after a successful post from the form to reset the form so that the user can send another mail.

In my controller I have the following method:

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

   //here I would like to reset the recaptcha

}

How can I do this from a function that is inside an angular controller ?

• javascript
• angularjs
• recaptcha

4 Answers 4

If you are using version 1

Recaptcha.reload();

If you are using version 2

grecaptcha.reset();

Through selectors :

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

using grecaptca wont work in .ts, we need to read component instance using it's template reference (#) via @viewChild.

Step 1: Import

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

Step 2: Read template reference

@ViewChild('captchaElem') captchaElem: ReCaptcha2Component;

Step 3: Read component to reset/reload

this.captchaElem.resetCaptcha();

you can use a boolean like isCaptcaSuccess to use check if your captcha is valid. you can set the values inside handleExpire, handleSuccess events.

Ngx captcha

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

Use Recaptcha.reload(); to reload the captcha.

Reset recaptcha v2 using ng-recaptcha in angular

STEP 1: add template ref (#reCaptcha) to the 're-captcha' selector

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

STEP 2: update *.ts file

1. add import

import { RecaptchaComponent } from 'ng-recaptcha';

2. add @ViewChild and add reset handler

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

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

For more info refer official docs:

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

https://github.com/DethAriel/ng-recaptcha/issues

https://github.com/DethAriel/ng-recaptcha/issues/91

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