Angular表单提交值为空问题：value绑定数据后提交无值

嘿，这问题我太熟了！你遇到的核心问题是**value属性和ngModel一起使用时，Angular的模板驱动表单不会把静态的value值同步到表单模型里**——只有当用户手动修改输入内容时，ngModel才会更新内部的模型状态，所以初始提交时你拿到的是空值。

快速修复方案 #

把你原来的input标签里的value="{{ data.UN }}"替换成ngModel的绑定语法，直接把数据绑定到控件上：

<form #updateForm="ngForm" (ngSubmit)="submitUpdateFunction(updateForm.value)" >
  <input type="text" name="UN" class="form-control" [(ngModel)]="data.UN">
</form>

• 用[(ngModel)]="data.UN"是双向绑定，既会把初始值渲染到输入框，也会把用户的修改同步回data.UN；
• 如果不需要双向绑定（比如不想修改原数据），可以用单向绑定[ngModel]="data.UN"，表单提交时一样能拿到初始值。

额外注意：异步数据加载的情况 #

因为你的数据是通过API订阅获取的，可能表单渲染时data还没加载完成，这时候ngModel绑定的是undefined，也会导致初始值为空。可以加个安全校验确保数据存在后再渲染表单：

<form *ngIf="data" #updateForm="ngForm" (ngSubmit)="submitUpdateFunction(updateForm.value)" >
  <input type="text" name="UN" class="form-control" [(ngModel)]="data.UN">
</form>

或者用安全导航操作符?.（不过模板驱动表单里更推荐用*ngIf确保数据就绪）：

<input type="text" name="UN" class="form-control" [(ngModel)]="data?.UN">

验证小技巧 #

提交前可以先打印表单的值看看状态，方便排查：

submitUpdateFunction(formValue: any) {
  console.log('表单值:', formValue);
  // 后续逻辑
}

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