Angular 16中ngModel无法注册输入值，POST请求失败求助

以下是可能导致问题的原因及对应解决方法：

• 未导入FormsModule导致双向绑定失效
  使用[(ngModel)]必须在组件所属的NgModule中导入FormsModule（模板驱动表单）或ReactiveFormsModule（响应式表单），否则双向绑定逻辑不生效，用户输入的内容无法同步到info对象中。
  解决：在对应模块文件中添加导入：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // 其他已有导入
      FormsModule
    ]
  })
  export class YourModule { }
  

• mat-dialog-close与click事件执行顺序冲突
  按钮同时绑定mat-dialog-close和click时，mat-dialog-close会优先触发，导致对话框提前关闭、组件实例可能被销毁，此时createNewAccount方法无法正确获取info的最新值，甚至请求被中断。
  解决：移除按钮上的mat-dialog-close，在请求完成后手动关闭对话框（需注入MatDialogRef）：

  import { MatDialogRef } from '@angular/material/dialog';
  
  constructor(private http: HttpClient, private dialogRef: MatDialogRef<NewProfDialog>) { }
  
  createNewAccount(info: any) {
    this.http.post<any>('http://localhost:3000/info/create', info).subscribe(
      () => {
        console.log('请求成功');
        this.dialogRef.close();
      },
      (err) => console.error('请求失败', err)
    );
  }
  

• 手动JSON.stringify导致请求体格式错误
  Angular的HttpClient.post会自动将JavaScript对象序列化为JSON字符串，并默认设置Content-Type: application/json请求头。手动调用JSON.stringify(info)后，后端会收到一个字符串类型的请求体，而非预期的键值对对象，解析后可能表现为空值。
  解决：移除JSON.stringify，直接传入info对象，同时可简化请求配置：

  createNewAccount(info: any) {
    this.http.post<any>('http://localhost:3000/info/create', info).subscribe(
      () => console.log('请求成功'),
      (err) => console.error('请求失败', err)
    );
  }
  

• 部分表单控件未绑定双向数据
  你提供的HTML仅展示了year字段的输入框，name和profession字段的输入框可能未添加[(ngModel)]绑定，导致这两个字段始终为初始空值，造成info对象不完整。
  解决：确保所有表单控件都正确绑定到info对应属性：

  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput name="name" [(ngModel)]="info.name" type="text">
  </mat-form-field>
  <mat-form-field>
    <mat-label>Profession</mat-label>
    <input matInput name="profession" [(ngModel)]="info.profession" type="text">
  </mat-form-field>
  

• 未导入HttpClientModule导致请求异常
  如果根模块（如AppModule）未导入HttpClientModule，即使组件注入了HttpClient，请求也无法正常发送，可能表现为请求失败，容易被误判为info为空的问题。
  解决：在根模块中导入HttpClientModule：

  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      // 其他已有导入
      HttpClientModule
    ]
  })
  export class AppModule { }
  

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