DatePicker does not have Formbuilder support

[e-belair]

I can't figure out how to make date picker working with formbuilder. Here is an example that generate an error:

import 'package:angular/angular.dart';
import 'package:angular_components/material_datepicker/material_datepicker.dart';
import 'package:angular_components/material_datepicker/module.dart';
import 'package:angular_components/model/date/date.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
    selector: 'form-builder',
    templateUrl: 'form_builder_test_component.html',
    providers: [
      datepickerBindings
    ],
    directives: [
      formDirectives,
      coreDirectives,
      MaterialDatepickerComponent,
    ]
)
class FormBuilderTestComponent {
  ControlGroup dateForm;

  Date date = Date.today();

  FormBuilderTestComponent() {
    dateForm = FormBuilder.controlGroup({
      'date': [date, Validators.required],
    });
  }
}

<form [ngFormModel]="dateForm">
    <p><material-datepicker
            [(ngModel)]="date"
            ngControl="date"></material-datepicker></p>
    <p><button [disabled]="!dateForm.valid" type="submit" class="btn btn-primary">Submit</button></p>
</form>

[e-belair]

I found a way to use it with FormBuilder but I don't know if it's a good way to do. I'm using a hidden input that contains ngControl/ngModel and I update my model Datetime (because Date type is an angular type) :

@Component(
    selector: 'form-builder',
    templateUrl: 'form_builder_test_component.html',
    providers: [
      datepickerBindings
    ],
    directives: [
      formDirectives,
      coreDirectives,
      MaterialDatepickerComponent,
    ]
)
class FormBuilderTestComponent extends OnInit {
  ControlGroup dateForm;

  Date get date {
    if (model == null || model.date == null) {
      return null;
    }
    return Date.fromTime(model.date);
  }
  set date(Date v) {
    model.date = v?.asUtcTime()??null;
  }

  Model model;

  FormBuilderTestComponent();

  @override
  void ngOnInit() async {
    model = Model();
    dateForm = FormBuilder.controlGroup({
      'date': [model.date, Validators.required],
      'name': [model.name, Validators.required],
    });
  }
}

class Model {
  String name = 'foobar';
  DateTime date = DateTime.now();
}

<form [ngFormModel]="dateForm">
    <p><material-datepicker [(date)]="date"
                            [required]="true">
    </material-datepicker>
    <input type="hidden" ngControl="date" [(ngModel)]="model.date" />
    </p>
    <p><input type="name" ngControl="name" [(ngModel)]="model.name"></p>
    <p><button [disabled]="!dateForm.valid" type="submit" class="btn btn-primary">Submit</button></p>
</form>
<p>Date comp: {{date}}</p>
<p>Date model: {{model.date}}</p>

Anyway, should be great to have this feature implemented.