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 ?

Answer 1

If you are using version 1

Recaptcha.reload();

If you are using version 2

grecaptcha.reset();

Through selectors :

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

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>