angular-dart - 在提交表单时访问 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);
}

我会留下这个问题，以防将来有人搜索类似的东西。

标签： angular-dart