如何结合原生FormData使用Angular表单实现传统提交？

方案一：同步自定义组件值到原生表单隐藏域 #

这是最贴合原生表单提交逻辑的方案，无需改动核心提交流程，只需把自定义组件的实时值同步到表单内的隐藏<input>元素，原生提交时就会自动将这些值纳入FormData。

如果用双向绑定：

<form #myForm method="POST" action="/submit-url">
  <!-- 自定义输入组件 -->
  <app-custom-input [(ngModel)]="customValue" name="customField"></app-custom-input>
  <!-- 同步值的隐藏域 -->
  <input type="hidden" name="customField" [value]="customValue">
  
  <!-- 其他原生表单元素 -->
  <input type="text" name="nativeField">
  
  <button type="submit">提交</button>
</form>

如果用响应式表单，直接让隐藏域和自定义组件绑定同一个FormControl：

<form [formGroup]="myFormGroup" #myForm method="POST" action="/submit-url">
  <app-custom-input formControlName="customField"></app-custom-input>
  <input type="hidden" formControlName="customField">
  
  <input type="text" formControlName="nativeField">
  
  <button type="submit">提交</button>
</form>

不管自定义组件内部怎么封装，只要值同步到隐藏域，原生表单提交时就会自动把这些值打包进FormData，完全符合传统提交+页面刷新的需求。

方案二：手动构建FormData并模拟表单提交 #

如果不想添加隐藏域，可以手动收集所有表单值（包括自定义组件的）构建FormData，再动态创建临时表单模拟原生提交：

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  @ViewChild('myForm') myForm!: ElementRef<HTMLFormElement>;
  customValue: string = '';
  nativeValue: string = '';

  handleManualSubmit() {
    // 1. 收集所有字段值
    const formData = new FormData();
    formData.append('customField', this.customValue);
    formData.append('nativeField', this.nativeValue);
    
    // 2. 创建临时表单
    const tempForm = document.createElement('form');
    tempForm.method = 'POST';
    tempForm.action = this.myForm.nativeElement.action;
    tempForm.style.display = 'none';
    
    // 3. 将FormData转成隐藏input加入临时表单
    formData.forEach((value, key) => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = value as string;
      tempForm.appendChild(input);
    });
    
    // 4. 挂载提交后移除临时表单
    document.body.appendChild(tempForm);
    tempForm.submit();
    document.body.removeChild(tempForm);
  }
}

模板里修改按钮触发逻辑：

<form #myForm method="POST" action="/submit-url">
  <app-custom-input [(ngModel)]="customValue" name="customField"></app-custom-input>
  <input type="text" [(ngModel)]="nativeValue" name="nativeField">
  
  <button type="button" (click)="handleManualSubmit()">提交</button>
</form>

方案三：手动发送POST请求后渲染返回HTML #

如果不想依赖原生表单提交，也可以用Angular的HttpClient手动发请求，拿到返回的HTML后替换当前页面内容：

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  constructor(private http: HttpClient) {}
  
  customValue: string = '';
  nativeValue: string = '';

  handleHttpSubmit() {
    const formData = new FormData();
    formData.append('customField', this.customValue);
    formData.append('nativeField', this.nativeValue);
    
    this.http.post('/submit-url', formData, { responseType: 'text' })
      .subscribe({
        next: (html) => {
          // 替换当前页面HTML
          document.documentElement.innerHTML = html;
          // 若需执行返回HTML中的脚本，可重新解析（谨慎使用）
          Array.from(document.querySelectorAll('script')).forEach(script => {
            const newScript = document.createElement('script');
            newScript.textContent = script.textContent;
            script.parentNode?.replaceChild(newScript, script);
          });
        },
        error: (err) => {
          console.error('提交失败', err);
        }
      });
  }
}

这种方式无需页面刷新，但要注意返回HTML中的资源和脚本可能需要额外处理，适合需要灵活控制的场景。

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