没有 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

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

你应该这样做，

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

Answer 2

我猜你可以这样破解：

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

不了解你的应用，所以这个（糟糕的）hack 可能根本不适合你的需求。

Angular2 Form variable does not work without ngModel