Angular前端单个值无法传递至MySQL数据库问题排查与解析

问题现象 #

提交Angular表单后，控制台显示tmember1字段值为null（实际输入了"Amal"），其余字段正常传递。将字段名改为memberOne后问题解决，需明确错误根源。

控制台输出：

assignedJob: "1"
assignedVehicle: "IN6562"
startSiteVisit: false
state:"Pending"
tmember1: null

相关代码 #

HTML模板

<div class="form-group">
    <label>Assign Team Member</label>  
    <br>
    <label for="tMember1">Member 1 Name:</label>
    <input type="text" ngModel 
           name="tMember1" 
           class="form-control" 
           id="tMember1" 
           placeholder="Assign a Member" required> 
</div>

Service接口定义

export interface SiteVisit{
    siteVisitName: string;
    siteVisitId: number;
    tMember1: String;
    assignedVehicle: string;
    state:string;
    assignedJob: string
}

Component代码

const siteVisit: SiteVisit = {
            
            tMember1: addForm.value.tMember1,
            assignedVehicle: assignedVehicle,
            startSiteVisit: false,
            state: state,
            assignedJob: addForm.value.assignedJob,
           
          };

错误根源 #

核心问题是字段名大小写不一致：

• HTML表单的name属性为tMember1（驼峰格式，M大写）
• 控制台输出的字段是tmember1（m小写）
• Angular表单在部分版本中，会将控件名默认转换为小写存储；或是后端接收时自动做了大小写转换，导致你用tMember1从addForm.value取值时，找不到匹配的键，返回null。

改为memberOne后，字段名无大小写差异，取值逻辑自然正常。

关于变量名是否可包含数字 #

变量名完全允许包含数字，问题不在数字本身，而在于命名的一致性：

1. HTML表单name属性、TypeScript接口字段名、Component取值键名三者必须严格一致（包括大小写）
2. 若后端接口对字段名大小写敏感，前后端也需保持完全匹配

解决方案 #

1. 统一所有环节的字段名大小写：比如全部用tMember1，或全部用tmember1
2. 确认addForm.value的键名与表单name属性完全匹配，可通过console.log(addForm.value)查看实际存储的键名
3. 若后端自动转换字段名为小写，前端取值时需对应使用小写键名

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