Angular2 Form 变量在没有 ngModel 的情况下不起作用答案

【问题标题】：Angular2 Form variable does not work without ngModelAngular2 Form 变量在没有 ngModel 的情况下不起作用
【发布时间】：2016-12-30 18:27:55
【问题描述】：

我有下面的html：

<form #f="ngForm">
  <input type="text" name="dd" value="abc" (change)="foof(f.form.value)"/>
</form>

但是，当我更改输入文本值时调用 foof 函数时，f.form.value 中没有任何内容。只有当我像下面这样将 ngModel 添加到输入元素时，

 <input type="text" name="dd" [ngModel]="abc" (change)="foof(f.form.value)"/>

然后 f.form.value 具有 dd 输入文本值。我不明白这是为什么。我是否必须使用 ngModel 才能使表单变量正常工作？

注意：由于我们的应用程序中的某些原因，当 dd 输入更改时，我们必须提交整个表单，所以我确实需要 foof(f.form.value)。由于模型和 html 布局之间的差异，我也不想要两种方式绑定，只需要一种方式绑定。

【问题讨论】：

【解决方案1】：

我猜你可以这样破解：

<form #f="ngForm">
  <input type="text" id="someInput" value="abc" (change)="foof()"/>
</form>

和

x:any;

foof() {
    this.x = document.getElementById("someInput");
    console.log(this.x.value);
}

不了解您的应用，所以这个（可怕的）黑客可能根本不适合您的需求。

【讨论】：

谢谢！！这解决了这个问题，同时也为我解决了另一个问题，即我必须有一个跨多个组件分布的表单，并且不使用响应式表单，而是使用模板驱动的表单。使用 javascript 也可以做到这一点！
太棒了！很高兴我能帮上忙！ :)

【解决方案2】：

我认为这不是您应该绑定到输入字段的方式。

你应该这样做，

 <input type="text" name="dd" [(ngModel)]="abc" (ngModelChange)="foof(abc)"/>

【讨论】：

由于我们的应用程序中的某些原因，我们必须在 dd 输入更改时提交整个表单，所以我确实需要 foof(f.form.value)。由于模型和 html 布局之间的差异，我也不想要两种方式绑定，只需要一种方式绑定。