没有ngModel，Angular2 Form变量不起作用

Question

我有下面的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布局之间存在差异。

Answer 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);
}

不知道你的应用程序，所以这个（可怕的）黑客可能完全不适合你的需求。

Answer 2

我认为这不是你应该如何绑定到输入字段。

你应该这样做，

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