Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Best way to use ng-recaptcha with multiple forms

See original GitHub issue

Hi have 2 components containing form on the same page, and I want to use invisible recaptcha in both of them.

I tried to use it twice, one recaptcha per component, and it looks to work almost, but I frequently get this JS error:

TypeError: null is not an object (evaluating '')
  at Th (/recaptcha/api2/r20170503135251/recaptcha__fr.js:130:152)
  at None (/recaptcha/api2/r20170503135251/recaptcha__fr.js:379:259)
  at None ([native code])
  at r (/vendor.e8ca299bdc7eb8a082ad.bundle.js:533:54252)
  at runTask (/polyfills.e973013abdce7c05a842.bundle.js:36:3206)

So, I guess it is probably better to create the recaptcha in my main component, then get a reference to it using @ViewChild, and pass it to each of my sub-components as an Input().

And when submitting a form in one of my component, manually trigger:


But infortunately, this method does not return an observable nor provide any callback mechanism, and make it tricky to execute the form action in my sub-component once the captcha has been resolved.

Any suggestion to solve my issue, or any plan to support such a scenario?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

Bodeclascommented, Feb 11, 2018

@ch-hristov hi! yes, I did.

Toubcommented, May 22, 2017

This error only occurs sometimes in production, so I can’t get a better stacktrace.

I tried locally your solution, and it looks good, so I will deploy in to production and let you know if it works.

If yes, it could be good to document the solution.

Here is what I did:

Main component

<!-- AccountLogin.html -->
<!-- declare captcha -->
<re-captcha #recaptchaRef="reCaptcha" size="invisible" siteKey="***"></re-captcha>

<!-- pass a reference to sub-components -->
<tw-account-reset-form [recaptchaRef]="recaptchaRef"></tw-account-reset-form>
<tw-account-create-form [recaptchaRef]="recaptchaRef"></tw-account-create-form>
// AccountLogin.ts
import {RecaptchaComponent} from 'ng-recaptcha';

export class AccountLogin {

   recaptchaRef: RecaptchaComponent;

Sub form 1 & 2

// AccountResetForm.ts
import {RecaptchaComponent} from 'ng-recaptcha';

export class AccountResetForm {
  recaptchaRef: RecaptchaComponent;

      // form submitted, do something
   tryToSubmit() {
      this.recaptchaRef.resolved.first().subscribe((captchaResponse) => this.captchaResolved(captchaResponse), err => {
          console.log('[AccountSigninEmail] Error resolving captcha', err);
        }, () => {
          // finally

I guess it is important to subscribe to the first emitted item only, and also to reset the component in the final block.

Also, when the first visible captcha appeared, I got the following error locally (not sure it can help!):

TypeError: is null

But there is no side-effect for the user, as the captcha shows and works correctly.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I show multiple recaptchas on a single page?
1) Create your recaptcha fields normally with this: <div class="g-recaptcha"></div> · 2) Load the script with this: <script src=" ...
Read more >
How to Add Multiple Google reCAPTCHA in a Single Page
How to add Multiple Google reCAPTCHA's. Here is how we can add multiple Google reCAPTCHA's. First, add HTML code.
Read more >
Handle Multiple reCAPTCHA's on the Same Page - Sterner Stuff
A vanilla Javascript way to handle multiple forms with reCAPTCHAs on the same page and get the form that was submitted in the...
Read more >
Multiple forms with invisible reCaptcha on same page with ...
In order to execute a specific captcha, I'd need to use a widget ID like grecaptcha.execute(widgetId1). But, the only way to assign an...
Read more >
Recapcha V3 doesnt work on page with multiple forms
Hello, i have an issue with Google Recaptcha V3. Id does work on single form but works only for first form if in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found