Best way to use ng-recaptcha with multiple forms

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 '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?

[Bodeclas]

@ch-hristov hi! yes, I did.

[Toub]

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 {

   @ViewChild('recaptchaRef')
   recaptchaRef: RecaptchaComponent;

Sub form 1 & 2

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

export class AccountResetForm {
   @Input()
  recaptchaRef: RecaptchaComponent;

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

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: a.la is null
Vp()
 recaptcha__fr.js:393
Np.prototype.Hk()
 recaptcha__fr.js:394
[1781]/</</ZoneDelegate.prototype.invokeTask()
 polyfills.bundle.js:7597
[1781]/</</Zone.prototype.runTask()
 polyfills.bundle.js:7364
ZoneTask/this.invoke()
 polyfills.bundle.js:7659
timer()

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