angular - Angular 2 ベータ版の (ngSubmit) に関する問題

Question

私は Angular 2 ベータ版でフォーム送信に取り組んでおり、モデルで適切に動作する双方向のデータ バインディングを取得できますが、Enter キーを押すと、1 つのフィールドで動作するときに 3 つのフィールドがあると送信できません。テンプレートファイルは次のとおりです。

<form class="course-form" (ngSubmit)="submit()" novalidate>
  <input
    (keyup.escape)="clear()"
    ngControl="name"
    [(ngModel)]="name"
    autocomplete="off"
    autofocus
    class="course-form__input"
    placeholder="Course Name"
    required
    type="text">

  <input
    (keyup.escape)="clear()"
    ngControl="department"
    [(ngModel)]="department"
    autocomplete="off"
    autofocus
    class="course-form__input"
    placeholder="Course Department"
    required
    type="text">

  <input
    (keyup.escape)="clear()"
    ngControl="description"
    [(ngModel)]="description"
    autocomplete="off"
    autofocus
    class="course-form__input"
    placeholder="Course Description"
    required
    type="text">
</form>
Remove this: {{name}} {{description}} {{department}}

したがって、最初の入力だけで、何かを入力してEnterキーを押すと、問題なく送信されます。問題は、追加のフィールドを追加することです。ただし、3 つのボックスすべてにテキストを入力すると、{{}} データ バインディングが問題なく表示されます。これは typescript ファイルです。重要な場所は、クラスをエクスポートする場所です。最初にフィールドを空の文字列に設定し、次に誰かが Enter キーを押すと、submit() 関数を呼び出す必要があります。3 つのフィールドがある場合、console.log の出力は表示されませんが、1 の場合は表示されます。

import { Component } from 'angular2/core';
import { CourseService } from 'modules/course/course-service';
const styles: string = require('./course-form.scss');
const template: string = require('./course-form.html');

@Component({
  selector: 'course-form',
  styles: [styles],
  template
})

export class CourseForm {

  name: string = '';
  department: string = '';
  description: string = '';

  constructor(private courseService: CourseService) {}

  clear(): void {
    this.name = '';
    this.department = '';
    this.description = '';
  }

  submit(): void {
    const name: string = this.name.trim();
    const department: string = this.department.trim();
    const description: string = this.description.trim();
    console.log('submitted');

    if (name.length & department.length & description.length) {
      this.courseService.createCourse(name, department, description);
    }
    this.clear();
  }
}

価値があるのは、これが createCourse 関数です。

  createCourse(name: string, department: string, description: string): void {
    this.ref.push(new Course(name, department, description), (error: Error) => {
      if (error) {
        console.error('ERROR @ createCourse :', error);
      }
    });
  }