Angular 6-更换页面时reCAPTCHA v2无法正常工作

Question

i'm creating a website using Angular 6.

I've routed my whole website using the router-outlet.

I have 5 pages and out of these 5 pages 3 of pages has a contact form. All the pages contain the same exact form.

My problem is that when I first load the website reCAPTCHA v2 works perfectly but when I change to a different page via navigation the reCAPTCHA v2 doesn't even appear unless I reload the whole page by clicking refresh. Once it works on the page it wasn't working on when I change pages without refresh again i get the same problem. reCAPTCHA v2 only seems to be responding when I fully refresh the page.

How would I resolve this on a single page application?

I want to have the same form in multiple pages without refreshing the page.

Answer 1

This looks to be a duplicate of Recaptcha google on angular 6 implementation

That being said, depending on how you're implementing, there are plenty of npm/yarn modules you can use:

https://www.npmjs.com/search?q=angular%20recaptcha

https://yarnpkg.com/en/packages?q=angular%20recaptcha&p=1

Most packages have instructions included so you should be fine. If you go down the direct implementation route, you can add a custom validator to your forms and let Angular take care of the rest:

function recaptchaValidator(control: FormControl): { [res: any]: boolean } {
    if (addYourServerSideLogicHere(control)) {
        return {validCaptcha: true};
    }
}

Custom validators are also well documented on the web...I'd suggest starting with a simple boolean validator and build your knowledge from there.

There are also plenty of great articles on how to implement this, for example:

https://netbasal.com/how-to-integrate-recaptcha-in-your-angular-forms-400c43344d5c

Hope this helps and Happy coding!