Angular中[(ngModel)]无法更新TypeScript变量问题求助

核心问题1：form内绑定[(ngModel)]的input缺少name属性 #

Angular规定，当在<form>标签内部使用[(ngModel)]进行双向绑定时，必须为每个绑定的<input>元素添加name属性。没有name的话，Angular无法正确关联表单控件与组件变量，导致输入值无法同步到组件的username和passwd中。

核心问题2：按钮默认提交行为可能重置页面 #

你的按钮在<form>内，默认类型是submit，点击会触发表单提交并刷新页面，组件会重新初始化，导致username和passwd被重置为空值，看起来像是绑定失效。

修改后的代码示例 #

HTML模板修改：

<form class="px-5">
    <div class="mb-3 py-3">
        <label for="id-login">Login</label>
        <!-- 添加name属性，与组件变量名对应 -->
        <input type="text" class="form-control" id="id-login" name="username" placeholder="Login" [(ngModel)]="username">
        <label for="id-password" class="mt-3">Senha</label>
        <!-- 添加name属性，与组件变量名对应 -->
        <input type="password" class="form-control" id="id-passwd" name="passwd" placeholder="Senha" [(ngModel)]="passwd">
        <!-- 设置type="button"，阻止默认表单提交行为 -->
        <button class="mt-3 btn btn-primary" type="button" (click)="$login()">Entrar</button>
    </div>
</form>

额外验证步骤

虽然你已确认导入FormsModule，仍需检查该模块是否在当前组件所属的模块（如组件属于FeatureModule，需在FeatureModule而非仅AppModule中导入）：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他依赖模块
    FormsModule
  ],
  declarations: [NavComponent]
})
export class YourModule { }

测试验证 #

修改后，可在组件的$login方法中先打印变量值，或在输入时通过Angular DevTools查看组件变量的实时变化，确认双向绑定是否正常工作。

内容的提问来源于stack exchange，提问作者William Benseny