Angular2 ngModel无效

Question

我正在尝试从文本输入中绑定ngModel，但它无效。 这是我的代码：

模板：

<form (ngSubmit)="onSubmit()">
    <div class="form-group">
        <input type="text" class="form-control" [(ngModel)]="message">
    </div>
    <input type="submit">
</form>

组件：

export class Component implements OnInit {
  message:string

  onSubmit() {
    console.log(this.message);
  }
}

始终获得未定义的值。如何将文本输入中的值绑定到变量？

Answer 1

使用模板驱动表单时，您必须为input提供name属性。

<input type="text" name="message" [(ngModel)]="message">

参考这个简单的 plunker demo 。

Answer 2

您缺少ngForm

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <div class="form-group">
        <input type="text" class="form-control" name="message" [(ngModel)]="message">
      </div>
      <input type="button">
    </form>

export class Component implements OnInit {
  message:string

   ngOnInit() {
this.message = "test";
}

  onSubmit(form: ngForm) {
    console.log(form.value);
  }
}