如何解决Angular双向绑定无法获取/更新值的问题？

问题根源 #

在Angular中，当<input>标签位于<form>内部且使用[(ngModel)]双向绑定时，必须为输入框添加name属性，或者设置standalone选项——否则Angular无法正确追踪表单控件状态，导致双向绑定失效。你的代码中缺少这一关键配置。

修复方案 #

方式1：为输入框添加name属性（推荐）

修改app.component.html，给两个输入框添加与绑定变量同名的name属性，同时为按钮绑定点击事件触发send方法：

<div>
  <form>
    <button type="button" (click)="send(usuario, senha)">Enviar</button><br>
    <label for="txt_usuario">Usuario:</label>
    <input type="text" id="txt_usuario" name="usuario" title="Usuário" size="10" [(ngModel)]="usuario"><br>
    <label for="txt_senha">Senha:</label>
    <input type="text" id="txt_senha" name="senha" title="Senha" size="10" [(ngModel)]="senha"><br>
  </form>
  <span>Usuario: {{usuario}}</span><br>
  <span>Senha  : {{senha}}</span>
</div>

方式2：设置standalone选项

如果不想依赖表单的控件追踪机制，可以给输入框添加[ngModelOptions]="{standalone: true}"，让其脱离表单独立绑定：

<div>
  <form>
    <button type="button" (click)="send(usuario, senha)">Enviar</button><br>
    <label for="txt_usuario">Usuario:</label>
    <input type="text" id="txt_usuario" title="Usuário" size="10" [(ngModel)]="usuario" [ngModelOptions]="{standalone: true}"><br>
    <label for="txt_senha">Senha:</label>
    <input type="text" id="txt_senha" title="Senha" size="10" [(ngModel)]="senha" [ngModelOptions]="{standalone: true}"><br>
  </form>
  <span>Usuario: {{usuario}}</span><br>
  <span>Senha  : {{senha}}</span>
</div>

验证要点 #

你的app.module.ts已经正确导入了FormsModule（双向绑定的必要依赖），这部分无需修改。完成上述修改后，输入框的内容会实时同步到组件类的usuario和senha变量，页面下方的文本也会随之更新，点击按钮也能正常打印变量值。

内容的提问来源于stack exchange，提问作者Fernando Lima