Angular 10项目中POST请求提交字段值为Null的问题求助

看起来你遇到的问题是表单数据没有正确传递到API，导致FirstName和LastName被存储为Null。我来帮你一步步排查和修复：

1. 修复表单绑定的核心错误 #

你的模板里有一个关键错误：表单容器的formGroup绑定写法不对。当前代码是：

<div class="row" formGroup="addEmployeeForm">

Angular中要绑定组件类里的FormGroup实例，必须用方括号的属性绑定：

<div class="row" [formGroup]="addEmployeeForm">

这个错误会导致你的formControlName无法正确关联到FormGroup，控件值无法被表单正确追踪。

2. 移除输入框的[value]绑定，改用表单控件设置初始值 #

你现在的输入框同时用了[value]="fName"和formControlName，这两者会冲突——FormControl应该是输入框值的唯一数据源。当你需要编辑员工数据时，不要用[value]赋值，而是用表单的patchValue方法：

修改showUpdateEmployeeData方法：

showUpdateEmployeeData(element: any): void {
  console.log('Show Data......');
  // 用patchValue给表单控件赋值，替代[value]绑定
  this.addEmployeeForm.patchValue({
    formcontrol_firstname: element.firstName,
    formcontrol_lastname: element.surName
  });
}

然后把模板中输入框的[value]属性删掉：

<!-- 修正后的FirstName输入框 -->
<input class="form-control" placeholder="First name" type="text" formControlName="formcontrol_firstname">

<!-- 修正后的LastName输入框 -->
<input class="form-control" placeholder="Last Name" type="text" formControlName="formcontrol_lastname">

3. 从FormGroup获取提交数据，而非模板引用变量 #

你的saveEmployeeData方法现在用模板引用变量firstName.value和lastName.value获取值，这不是Angular表单的最佳实践，而且容易出现值不同步的问题。应该直接从addEmployeeForm.value中提取数据：

修改saveEmployeeData方法：

saveEmployeeData() { // 移除参数，直接从表单获取
  console.log('Save Employee Data clicked...');
  // 先检查表单控件是否有效
  if (this.addEmployeeForm.invalid) {
    alert('Please Enter First Name and Last Name');
    return;
  }
  console.log('saved successfully...');
  // 从表单值构建请求模型
  const formValues = this.addEmployeeForm.value;
  const requestParams: AddEmployeeModel = {
    FirstName: formValues.formcontrol_firstname,
    SurName: formValues.formcontrol_lastname,
    CreatedBy: formValues.CreatedBy
  };
  console.log(requestParams);
  this.maintenanceService.addEmployeeDetails(requestParams).subscribe(res => {
    console.log(res);
    // 提交成功后可以重置表单
    this.addEmployeeForm.reset();
  }, error => {
    console.log(error);
  });
}

同时修改模板中按钮的点击事件，不需要传参数：

<button class="btn primary-btn comBtn" type="button" (click)="saveEmployeeData()">Save</button>

4. 检查API字段名是否匹配 #

如果上面的修复后还是存为Null，那大概率是前后端字段名不匹配：

• 你的前端模型AddEmployeeModel里的字段是FirstName和SurName（大写开头）
• 检查后端API接收的模型字段是不是firstName和surName（小写开头的驼峰）
  如果后端用的是小写开头，你需要修改前端模型的字段名，或者在POST请求时做字段映射，确保和后端一致。

额外优化：给表单控件添加必填验证 #

为了更规范的表单验证，可以在初始化表单时添加必填验证：

this.addEmployeeForm = this.formBuilder.group({
  formcontrol_firstname: new FormControl(null, [Validators.required]),
  formcontrol_lastname: new FormControl(null, [Validators.required]),
  CreatedBy: ['Mohit Sharma']
});

记得导入Validators：

import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

按照这些步骤修复后，表单数据应该能正确传递到API，不会再出现Null的问题了。

内容的提问来源于stack exchange，提问作者Mohit Kumar Sharma