Best way to use ng-recaptcha with multiple forms
See original GitHub issueHi 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 'a.style')
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:
this.recaptchaRef.execute();
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:
- Created 6 years ago
- Comments:10 (4 by maintainers)
Top 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="https://www.google.com/recaptcha ...
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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@ch-hristov hi! yes, I did.
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
Sub form 1 & 2
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!):
But there is no side-effect for the user, as the captcha shows and works correctly.