Angular 9文件上传表单ngSubmit事件无效，PhpStorm报警告求助

这个问题很常见，本质是Angular的表单指令没有被正确导入，导致原生<form>标签不识别ngSubmit事件，所以你的onSubmit()方法根本不会被触发，PhpStorm的警告也是因为IDE检测到这个表单没有被Angular的表单模块增强。

具体原因 #

Angular为了模块化，把表单相关的功能拆分成了FormsModule（模板驱动表单）和ReactiveFormsModule（响应式表单）两个模块。默认情况下，你的模块不会自动导入这些模块，所以原生的<form>标签只是普通的HTML元素，并不支持Angular的ngSubmit事件绑定。

解决步骤 #

• 导入表单模块
  打开你的组件所属的模块文件（比如app.module.ts，如果是独立的功能模块就打开对应的模块文件，比如file-upload.module.ts），添加以下代码：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  // 导入FormsModule
  import { FormsModule } from '@angular/forms';
  
  import { FileuploaderComponent } from './fileuploader.component';
  
  @NgModule({
    declarations: [
      FileuploaderComponent
    ],
    imports: [
      BrowserModule,
      // 把FormsModule加入到imports数组中
      FormsModule
    ],
    providers: [],
    bootstrap: [/* 你的根组件 */]
  })
  export class AppModule { }
  

  如果之后你需要用响应式表单，就把ReactiveFormsModule也导入进去，不过当前场景用FormsModule就足够解决问题了。

• 优化表单代码（可选但推荐）
  虽然导入模块后ngSubmit就能正常触发了，但为了更好地控制文件上传，建议你给文件输入框添加事件绑定来获取选中的文件：

  修改fileuploader.component.html：

  <form (ngSubmit)="onSubmit()">
    <div>
      <!-- 添加change事件绑定，用于获取选中的文件 -->
      <input type="file" name="finput" (change)="onFileSelected($event)">
    </div>
    <div>
      <button type="submit">Upload File</button>
    </div>
  </form>
  

  修改fileuploader.component.ts：

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-fileuploader',
    templateUrl: './fileuploader.component.html',
    styleUrls: ['./fileuploader.component.css']
  })
  export class FileuploaderComponent {
    selectedFile: File | null = null;
  
    onFileSelected(event: any) {
      // 获取选中的第一个文件
      this.selectedFile = event.target.files[0];
    }
  
    onSubmit() {
      console.log('in on submit');
      if (this.selectedFile) {
        // 这里写你的文件上传逻辑，比如用HttpClient发送POST请求
        console.log('要上传的文件:', this.selectedFile);
      }
    }
  }
  

这样修改后，ngSubmit事件就能正常触发，PhpStorm的警告也会消失，同时你也能在onSubmit()里拿到要上传的文件进行后续处理。

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