Angular中ngModel绑定异常：credentials始终为空值

API 探路者

2026-5-28

问题排查：Angular中ngModel无法更新credentials值的原因及解决办法

我来帮你搞定这个问题～你遇到的credentials始终为空的情况，主要是两个关键问题导致的，咱们一步步来解决：

1. 单向绑定 vs 双向绑定的问题

你当前用的是[ngModel]="credentials.username"，这是单向数据绑定——它只会把组件里的credentials值同步到输入框，但输入框里用户输入的内容不会反向更新组件里的credentials对象。

要实现视图和数据的双向同步，你需要用双向数据绑定语法：[(ngModel)]（俗称“香蕉在盒子里”）。

修改后的表单代码如下：

<form role="form" (submit)="login()">
  <input 
    type="text" 
    name="username" 
    id="username" 
    required="required" 
    [(ngModel)]="credentials.username"
  />
  <input 
    type="password" 
    name="password" 
    id="password" 
    required="required" 
    [(ngModel)]="credentials.password" 
  />
  <button type="submit">Sign in</button>
</form>

2. 确认FormsModule已导入

Angular的ngModel指令是由FormsModule提供的，如果你的模块里没有导入这个模块，双向绑定也不会生效。

打开你的组件所属的模块文件（比如LoginModule.ts或者AppModule.ts），确保已经导入并声明FormsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule
import { HttpClientModule } from '@angular/common/http';

import { LoginComponent } from './login.component';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule // 添加到imports数组中
  ],
  providers: [],
  bootstrap: [LoginComponent]
})
export class LoginModule { }