0

我正在 Angular 2 beta 中提交表单，我可以让 2 路数据绑定与模型正常工作，但是当我按下回车键时，当我有 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}}

所以当我只有第一个输入时，我可以输入一些东西并按回车，它会很好地提交。麻烦在于添加额外的字段。但是，如果我在所有 3 个框中输入文本，我会看到 {{}} 数据绑定很好。这是打字稿文件，重要的地方是我导出类的地方，我首先将字段设置为空字符串，然后当有人按下回车时它应该调用 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);
      }
    });
  }
4

0 回答 0