title: Correct way to integrate reCAPTCHA with Angular 4
body: <p>I'm trying to integrate an <a href="https://developers.google.com/recaptcha/docs/invisible" rel="nofollow noreferrer">Invisible reCAPTCHA</a> with my Angular 4 form.</p>
  
  <p>In the TS part of the component I have a function like this:</p>
  
  <pre><code>onSubmit(token: string) {
      alert(token);
  }
  </code></pre>
  
  <p>And my HTML looks like this (only the relevant parts shown):</p>
  
  <pre><code>&lt;form (ngSubmit)="onSubmit()" #myForm="ngForm"&gt;
      &lt;button  type="submit" class="btn g-recaptcha" data-sitekey="mykey" data-callback="onSubmit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When clicking on that button I get either an alert saying the token is undefined, or I get an error message like this: "Cannot contact reCAPTCHA. Check your connection and try again." Not really deterministic - sometimes I see one behavior, sometimes the other.</p>
  
  <p>I thought that maybe the <code>(ngSubmit)</code> in the form tag could interfere with the reCAPTCHA. But if I remove <code>(ngSubmit)</code> then the <code>onSubmit</code> function is not called at all...</p>
  
  <p>What is the correct way for integrating this?</p>
  
  <p>There is a similar question for AngularJS <a href="https://stackoverflow.com/questions/42962577/invisible-google-recaptcha-with-angularjs">here on StackOverflow</a>, but I don't really know how to adapt that solution to Angular 4.</p>