Angular中ngModel无法更新字符串变量值的原因排查

核心原因 #

在Angular中，当带有[(ngModel)]的<input>处于<form>标签内部时，必须为该input指定name属性。否则Angular的表单机制无法正确识别并追踪这个控件，双向绑定的数据流会中断，导致组件类中的变量无法同步视图输入的值。

修复方案 #

方案1：为绑定ngModel的input添加name属性

修改组件模板代码：

<form>
    <label>Id: </label>
    <input type="text" name="userId" [(ngModel)]="t" (keyup.enter)="Up()">
    <label for="pass">Password: </label>
    <input type="password" id="pass">
</form>

方案2：移除<form>标签（若不需要表单相关功能）

如果你的场景不需要使用表单的提交、验证等特性，可以直接去掉form标签，这样ngModel可以正常工作：

<label>Id: </label>
<input type="text" [(ngModel)]="t" (keyup.enter)="Up()">
<label for="pass">Password: </label>
<input type="password" id="pass">

内容的提问来源于stack exchange，提问作者Thug Life