Angular2 ngModel 不工作答案

【问题标题】：Angular2 ngModel not workingAngular2 ngModel 不工作
【发布时间】：2017-06-02 08:39:56
【问题描述】：

我正在尝试从文本输入绑定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);
  }
}

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

【问题讨论】：

标签： angular

【解决方案1】：

当使用模板驱动表单时，你必须给input 一个name 属性。

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

参考这个简单的plunker demo。

【讨论】：

【解决方案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);
  }
}

【讨论】：

你没有给消息赋值
我的代码和这里一样，但是消息总是空对象。我注意到当我用这个表单打开我的页面时（localhost:4200/page/something）url 更改为 localhost:4200，但是当我删除 [(ngModel)]="message" url 时是正确的
您是否从 angular/forms 导入了 ngForm ？
让我们continue this discussion in chat。