AngularDart Google ReCaptcha component. Advanced usage example

my_component.dart

import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_grecaptcha/angular_grecaptcha.dart';
import 'package:http/browser_client.dart';

@Component(
  selector: 'my-component',
  templateUrl: 'my_component.html',
  styleUrls: const [
    'my_component.css'
  ],
  directives: const [
    CORE_DIRECTIVES,
    formDirectives,
    AngularRecaptcha
  ],
  providers: const [
    const Provider(BrowserClient, useClass: BrowserClient)
  ]
)
class MyComponent {
  String name = '';
  String recaptchaResponse = '';
  final NgZone _ngZone;

  MyComponent(this._ngZone);

  // It is possible not to use callback function and recaptchaResponse variable. See comment in onSubmit()
  callback(var response) {
    // In order JS-callback could take the expected effect on angular component
    // the actions must be run in NgZone
    _ngZone.run(() {
      recaptchaResponse = response;
      print('Recaptcha resolved.\nResponse: $recaptchaResponse');
    });
  }
  
  expiredCallback() {
    // You can add some actions here
    print('ReCaptcha response has been expired.');
  }
  void reset() {
    GRecaptcha.reset();
  }

  Future<bool> onSubmit() async {
    final http = new BrowserClient();
    final response = await http.post(
      'http://your.site.com',
      body: {
        'name': name,
        // Instead of this line you can use the alternative:
        // 'g-recaptcha-response': GRecaptcha.getResponse()
        // In this case you do not need callback-function  and recaptchaResponse variable
        'g-recaptcha-response': recaptchaResponse
      }
    );
    if(response.statusCode == 200) {
      print('Ok!');
    } else {
      print('Something went wrong!');
    }
    return false;
  }
}

my_component.html

<h2>AngularDart Google ReCaptcha component. Advanced example</h2>
<form (ngSubmit)="onSubmit()">
  <label for="name">Input your name</label>
  <input id="name" name="name" type="text" [(ngModel)]="name">
  <g-recaptcha
    sitekey="YOUR SITEKEY"
    size="compact"
    theme="dark"
    [callback]="callback"
    [expired-callback]="expiredCallback"
    ></g-recaptcha>
    <button type="submit" [disabled]="recaptchaResponse.isEmpty">Submit</button>
</form>

pubspec.yaml

name: recaptcha
version: 0.0.1

environment:
  sdk: '>=1.24.0 <2.0.0'

dependencies:
  angular: ^4.0.0
  angular_forms: ^1.0.0
  angular_grecaptcha: ^0.0.2

dev_dependencies:
  angular_test: ^1.0.0
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  test: ^0.12.0

transformers:
- angular:
    entry_points:
      - web/main.dart
      - test/**_test.dart
- test/pub_serve:
    $include: test/**_test.dart
- dart_to_js_script_rewriter