Angular 7表单提交刷新页面且onSubmit()未触发的问题解决

首先咱们理清核心问题：

1. 点击提交页面刷新、onSubmit()没执行：这是原生<form>标签的默认提交行为导致的——浏览器会直接刷新页面，跳过Angular组件方法的执行。
2. formGroup报错：因为你没有在模块中导入响应式表单依赖的ReactiveFormsModule。

下面给你两种实用解决方案，按需选择：

方案一：模板驱动表单（适合简单场景，快速上手） #

这种方式贴近原生HTML表单，配置成本低：

步骤1：导入FormsModule #

打开app.module.ts，添加FormsModule到导入列表：

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

@NgModule({
  imports: [
    // 保留你已有的HttpClientModule和其他模块
    HttpClientModule,
    FormsModule // 新增这个模块
  ],
  // ...其他配置项
})
export class AppModule { }

步骤2：修改组件模板 #

给表单添加ngForm引用，同时给文件输入框绑定ngModel（模板驱动表单需要这个跟踪状态），再加一个文件选择事件监听：

<form #uploadForm="ngForm" (ngSubmit)="onSubmit(uploadForm)">
  <div class="form-group">
    <input type="file" name="image" ngModel (change)="onFileSelected($event)" />
  </div>
  <div class="form-group">
    <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</form>

步骤3：完善组件逻辑 #

更新fileupload.component.ts，添加文件选择方法并完善onSubmit：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgForm } from '@angular/forms'; // 新增导入

@Component({
  selector: 'app-fileupload',
  templateUrl: './fileupload.component.html',
  styleUrls: ['./fileupload.component.css']
})
export class FileuploadComponent implements OnInit {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) { }

  ngOnInit(): void { }

  // 监听文件选择，保存选中的文件
  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
    }
  }

  onSubmit(form: NgForm): void {
    console.log('Called!');
    console.log('选中的文件:', this.selectedFile);
    
    // 实现文件上传逻辑：创建FormData并调用接口
    if (this.selectedFile) {
      const formData = new FormData();
      formData.append('image', this.selectedFile);
      
      // 示例：调用上传接口
      // this.http.post('你的上传API地址', formData)
      //   .subscribe(response => console.log('上传成功:', response));
    }
  }
}

方案二：响应式表单（适合复杂表单，扩展性更强） #

如果后续表单需要添加更多字段或验证逻辑，响应式表单会更灵活：

步骤1：导入ReactiveFormsModule #

打开app.module.ts，添加ReactiveFormsModule：

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

@NgModule({
  imports: [
    HttpClientModule,
    ReactiveFormsModule // 新增这个模块
  ],
  // ...其他配置项
})
export class AppModule { }

步骤2：配置组件中的FormGroup #

更新fileupload.component.ts，用FormBuilder创建表单组：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup } from '@angular/forms'; // 新增导入

@Component({
  selector: 'app-fileupload',
  templateUrl: './fileupload.component.html',
  styleUrls: ['./fileupload.component.css']
})
export class FileuploadComponent implements OnInit {
  uploadForm: FormGroup;
  selectedFile: File | null = null;

  constructor(
    private http: HttpClient,
    private formBuilder: FormBuilder // 注入FormBuilder
  ) {
    // 初始化表单组（可添加验证器，比如Validators.required）
    this.uploadForm = this.formBuilder.group({
      image: ['']
    });
  }

  ngOnInit(): void { }

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
    }
  }

  onSubmit(): void {
    console.log('Called!');
    console.log('选中的文件:', this.selectedFile);
    
    if (this.selectedFile) {
      const formData = new FormData();
      formData.append('image', this.selectedFile);
      
      // 示例：调用上传接口
      // this.http.post('你的上传API地址', formData)
      //   .subscribe({
      //     next: res => console.log('上传成功:', res),
      //     error: err => console.error('上传失败:', err)
      //   });
    }
  }
}

步骤3：修改组件模板 #

绑定formGroup到表单，保留文件选择事件：

<form [formGroup]="uploadForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <input type="file" name="image" (change)="onFileSelected($event)" />
  </div>
  <div class="form-group">
    <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</form>

临时应急方案（不推荐长期使用） #

如果只想快速阻止页面刷新，可以在onSubmit中传入$event并阻止默认行为，但这不是Angular的最佳实践：

<form (ngSubmit)="onSubmit($event)">
  <!-- 表单内容 -->
</form>

onSubmit(event: Event): void {
  event.preventDefault(); // 阻止默认刷新行为
  console.log('Called!');
}

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