在Angular中使用原生事件提交表单是否属于不良实践？

安全阿岳

2026-6-20

关于Angular表单提交的实践疑问与最佳方案

我刚接触Angular，主要从React转场而来。需要将表单提交至后端，我目前认为最简单的解决方案如下：

HTML代码：

<form (submit)="submitPost($event)" method="post" enctype="multipart/form-data">
    <label for="author">Username:</label>
    <input type="text" name="author" required />
    <label for="content">Post:</label>
    <textarea name="content" required ></textarea>
    <label for="image">Upload an image (optional):</label>
    <input type="file" name="image" />
    <button type="submit">Submit</button>
</form>

TypeScript代码：

async submitPost(event: any) {
    const formData = new FormData(event.target);

    await fetch(`${this.backendEndpoint}/api/v1/create-post`, {
        method: 'POST',
        body: formData
    });
}

我查阅相关指南后发现，大多采用ReactiveForms方案，这需要手动创建含各字段属性的对象（甚至无法正确绑定文件输入，需额外样板代码处理文件），或是使用ngModel，同样要为每个表单输入手动编写类字段，对我来说较为不便。

请问该方法在专业领域是否属于不良实践？若是，符合行业最佳实践的最优解决方案是什么？

你的方案是否属于不良实践？

不算严格意义上的不良实践，这种原生表单提交的方式在简单场景下完全可行——比如表单结构固定、无需实时表单验证、不需要动态控制表单状态的场景，它的优势就是代码简洁、上手快，和你在React里用原生表单的思路一致。

但在中大型Angular项目里，这种方式的局限性会逐渐显现：

缺乏实时表单验证能力：无法在用户输入过程中即时反馈自定义错误（比如用户名格式不对、内容长度不够），只能依赖浏览器原生验证，定制性差。
难以动态控制表单：如果需要根据业务逻辑禁用输入、隐藏字段或动态添加表单行，原生方式的实现成本会很高。
表单状态难以追踪：无法轻松获取表单的脏值（dirty）、触摸状态（touched）等，这些状态在复杂交互里很重要。
测试难度高：原生表单逻辑和DOM耦合度高，单元测试需要模拟DOM事件，不如Angular表单API好测试。

行业最佳实践的最优解决方案

针对你的场景（包含文件上传），推荐使用响应式表单（ReactiveForms），虽然看起来有额外代码，但它的扩展性和可维护性是原生方式无法比拟的，而且文件上传的处理也有成熟方案：

1. 基础实现（包含文件上传）

组件中定义响应式表单：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-post-form',
  templateUrl: './post-form.component.html'
})
export class PostFormComponent {
  postForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.postForm = this.fb.group({
      author: ['', Validators.required],
      content: ['', Validators.required],
      image: [null] // 存储文件对象
    });
  }

  onFileChange(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      this.postForm.patchValue({ image: file });
      this.postForm.get('image')?.updateValueAndValidity();
    }
  }

  async submitPost() {
    if (this.postForm.invalid) {
      this.postForm.markAllAsTouched();
      return;
    }

    const formData = new FormData();
    Object.keys(this.postForm.controls).forEach(key => {
      const value = this.postForm.get(key)?.value;
      if (value) formData.append(key, value);
    });

    try {
      await this.http.post(`${this.backendEndpoint}/api/v1/create-post`, formData).toPromise();
      this.postForm.reset(); // 提交成功后重置表单
    } catch (error) {
      console.error('提交失败', error);
    }
  }
}

对应的HTML模板：

<form [formGroup]="postForm" (ngSubmit)="submitPost()">
    <label for="author">Username:</label>
    <input type="text" formControlName="author" required />
    <div *ngIf="postForm.get('author')?.invalid && postForm.get('author')?.touched">
        用户名不能为空
    </div>

    <label for="content">Post:</label>
    <textarea formControlName="content" required ></textarea>
    <div *ngIf="postForm.get('content')?.invalid && postForm.get('content')?.touched">
        内容不能为空
    </div>

    <label for="image">Upload an image (optional):</label>
    <input type="file" (change)="onFileChange($event)" />

    <button type="submit" [disabled]="postForm.invalid">Submit</button>
</form>

2. 为什么这是最优方案？

强大的验证体系：可轻松添加自定义验证器、异步验证器（比如检查用户名是否已存在），实时显示错误信息。
表单状态可控：通过postForm.status、postForm.dirty等属性追踪状态，实现复杂交互。
可扩展性强：后续添加字段、动态表单行时，FormArray可以轻松实现。
易于测试：表单逻辑与DOM解耦，单元测试只需测试FormGroup逻辑，无需模拟DOM。
文件上传逻辑清晰：通过(change)事件绑定文件，手动添加到FormData，方便后续预处理（压缩、预览等）。

3. 简化代码的小技巧

如果觉得手动创建FormGroup繁琐，可使用社区工具（如@ng-stack/forms）简化，但官方ReactiveForms是最稳定通用的选择。另外，重复的验证逻辑可封装成自定义验证器复用。

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