Reset google recaptcha in angular application?

Question

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 ?

Upmost

Answer 1

If you are using version 1

Recaptcha.reload();

If you are using version 2

grecaptcha.reset();

Through selectors :

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

Stickinthemud

Is '#recaptcha_reload' generated by default, am Isue to have it ? – Upmost

Yeah. The recaptcha script you are including generates this. So it will always work untill they change its id. – Stickinthemud

they must have changed it or I'm using an older version or something, as I can't seem to find it, jquerry returns an empty array. – Upmost

Then just replace the id of the reload button in place of 'recaptcha_reload'. – Stickinthemud

Thanks a lot @Stickinthemud 🔥👨🏽‍💻 – Mystical

Answer 2

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>

Hydrophobia

this.captchaElem.resetCaptcha() didn't work for me but this.captchaElem.reloadCaptcha();; – Subscapular

Answer 3

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

Transudate

It gives me the error Recaptcha is not defined, what do I need to inject into the controller to get acess to recaptcha ? – Upmost

have you included the script <script src=”google.com/recaptcha/api/js/recaptcha.js“></ script> – Transudate

Yes I've included it, the recaptcha works on the site, but I can't seem to access it in the controller. – Upmost

have you included the script file above the app.js file in the inclusion – Transudate

Yes it's above all the angular related stuff so I'm not sure why can't I aces it. – Upmost

Answer 4

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

Equilibrist