Доступ к значениям AngularDart NgForm при отправке формы

Question

У меня проблемы с реализацией NgForm для обработки данных формы.В настоящее время у меня есть мое рабочее решение, просто реализующее двустороннее связывание, например:

post_create_component.dart

import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_input/material_input.dart';

import '../../models/post.dart';

@Component(
    selector: 'app-post-create',
    styleUrls: [
      'package:angular_components/css/mdc_web/card/mdc-card.scss.css',
      'post_create_component.css'
    ],
    templateUrl: 'post_create_component.html',
    directives: [
      formDirectives,
      MaterialButtonComponent,
      MaterialIconComponent,
      materialInputDirectives,
    ])
class PostCreateComponent {
  String enteredTitle = '';
  String enteredContent = '';

  final _postCreated = new StreamController<Post>();

  void onAddPost() {
    Post post = Post(this.enteredTitle, this.enteredContent);
    _postCreated.add(post);
  }

  @Output()
  Stream<Post> get postCreated => _postCreated.stream;
}

post_create_component.html

<section>
    <h2>Post Comments</h2>
    <div class="mdc-card demo-size">
        <material-input label="Title" floatingLabel [(ngModel)]="enteredTitle" class="wide">
        </material-input>
        <material-input label="Content" floatingLabel [(ngModel)]="enteredContent" class="wide">
        </material-input>
        <div class="mdc-card__actions">
            <div class="mdc-card__action-buttons">
                <material-button raised (click)="onAddPost()">Save Post</material-button>
            </div>
            <div class="mdc-card__action-icons">
                <material-button icon>
                    <material-icon icon="favorite_border"></material-icon>
                </material-button>
                <material-button icon>
                    <material-icon icon="share"></material-icon>
                </material-button>
                <material-button icon>
                    <material-icon icon="more_vert"></material-icon>
                </material-button>
            </div>
        </div>
    </div>
</section>

Я реорганизовал мойкод выглядит следующим образом:

post_create_component.dart

import 'dart:async';
import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_input/material_input.dart';

import '../../models/post.dart';

@Component(
    selector: 'app-post-create',
    styleUrls: [
      'package:angular_components/css/mdc_web/card/mdc-card.scss.css',
      'post_create_component.css'
    ],
    templateUrl: 'post_create_component.html',
    directives: [
      formDirectives,
      MaterialButtonComponent,
      MaterialIconComponent,
      materialInputDirectives,
      NgForm,
    ])
class PostCreateComponent {
  String enteredTitle = '';
  String enteredContent = '';

  final _postCreated = new StreamController<Post>();

  void onAddPost(NgForm form) {
    window.console.log(form.value);
    Post post = Post(form.value.title, form.value.content);
    _postCreated.add(post);
  }

  @Output()
  Stream<Post> get postCreated => _postCreated.stream;
}

post_create_component.html

<section class="data-entry">
    <h2>Post Comments</h2>
    <div class="mdc-card demo-size">
        <form #postForm="ngForm">
            <material-input label="Title" floatingLabel class="wide" ngControl="title" required name="title" ngModel>
            </material-input>
            <material-input label="Content" floatingLabel class="wide" ngControl="content" required name="content"
                ngModel>
            </material-input>
            <div class="mdc-card__actions">
                <div class="mdc-card__action-buttons">
                    <material-button raised type="submit" (trigger)="onAddPost(postForm)">Save Post</material-button>
                </div>
                <div class="mdc-card__action-icons">
                    <material-button icon>
                        <material-icon icon="favorite_border"></material-icon>
                    </material-button>
                    <material-button icon>
                        <material-icon icon="share"></material-icon>
                    </material-button>
                    <material-button icon>
                        <material-icon icon="more_vert"></material-icon>
                    </material-button>
                </div>
            </div>
        </form>
    </div>
</section>

Когда я отправляю свою форму, я получаю следующую ошибку: Ошибка журнала консоли в Chrome Dev Tools .Очевидно, я не получаю доступ к Карте Идентификации правильно.Как мне получить доступ к значениям?Любая помощь приветствуется.

ОБНОВЛЕНИЕ

После многих часов поиска решение было чрезвычайно простым:

void onAddPost(NgForm form) {
  Post post = Post(form.value["title"], form.value["content"])    
  _postCreated.add(post);
}

Я оставлю вопросв случае, если кто-то ищет что-то подобное в будущем.