Angular表单onSubmit获取值返回undefined问题排查

你遇到的表单值返回undefined的问题，主要是因为对Angular表单的取值方式理解有误，我来帮你一步步梳理和解决：

核心问题 #

你的<select>控件设置的name属性是examenId，但在onSubmit方法里却尝试直接访问form.examen_id——这两个名称不匹配，而且Angular的NgForm实例的表单值是存储在form.value对象中的，不是直接挂载在form实例本身。

具体解决步骤 #

1. 修正表单值的获取方式 #

修改你的TS代码中的onSubmit方法，通过form.value结合控件的name属性来获取对应值：

onSubmit(form: NgForm) {
  // 方式一：通过form.value + 控件的name属性取值
  console.log(form.value.examenId); 
  // 方式二：直接使用双向绑定的变量（因为[(ngModel)]已经同步了下拉框的选中值）
  console.log(this.examen_id);
}

2. 必要的模块导入检查 #

确保你的组件所在的模块（比如AppModule或特性模块）已经导入了FormsModule，否则ngModel和ngForm这些指令会无法生效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入的模块...
    FormsModule
  ]
})
export class YourModule { }

3. 额外补充：文件上传的取值方法 #

你的文件输入框目前没有绑定ngModel或设置name，所以无法通过NgForm获取文件。如果需要在提交时获取选中的文件，可以给它添加模板引用变量：

<input type="file" #fileInput class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">

然后在TS组件中通过ViewChild获取文件：

import { ViewChild, ElementRef } from '@angular/core';

// 组件类内添加
@ViewChild('fileInput') fileInput: ElementRef<HTMLInputElement>;

onSubmit(form: NgForm) {
  const selectedFile = this.fileInput.nativeElement.files?.[0];
  console.log('选中的文件:', selectedFile);
}

这样就能正确获取到下拉框的选中值和上传的文件了。

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