Angular中如何在最后一个子表单提交时手动提交主响应式表单

HTML 标准明确禁止嵌套 <form> 元素，浏览器解析DOM时会自动将嵌套的内层表单移出外层表单，导致绑定的提交事件、表单关联逻辑出现不可预期的异常，你当前的代码结构本身不符合规范，优先建议调整结构实现需求。

方案1：规范DOM结构实现（推荐，无兼容问题） #

移除所有内层<form>标签，替换为不生成额外DOM的<ng-container>或者普通<div>来绑定formGroupName，仅保留最外层主表单，通过按钮类型区分步骤切换和最终提交行为即可。
调整后的模板代码：

<form class="main-form" [formGroup]="form" (ngSubmit)="sendData()">
  <ng-container *ngIf="currentQuestion === 1" formGroupName="nameQuestion">
    <!-- 姓名类问题控件放置区域 -->
    <button type="button" (click)="nextQuestion()">下一步</button>
  </ng-container>
  <ng-container *ngIf="currentQuestion === 3" formGroupName="phoneQuestion">
    <!-- 手机号类问题控件放置区域 -->
    <button type="button" (click)="nextQuestion()">下一步</button>
  </ng-container>
  <ng-container *ngIf="currentQuestion === 4" formGroupName="marketsQuestion">
    <!-- 市场相关问题控件放置区域 -->
    <button type="button" (click)="nextQuestion()">下一步</button>
  </ng-container>
  <ng-container *ngIf="currentQuestion === 5" formGroupName="biographyQuestion">
    <!-- 个人简介类问题控件放置区域 -->
    <button type="submit">提交</button>
  </ng-container>
</form>

配套逻辑说明：

• 非最后一步的操作按钮统一设置type="button"，点击后仅执行nextQuestion()方法做当前步骤表单校验、步骤切换，不会触发表单提交
• 最后一步的提交按钮设置type="submit"，点击后会自动触发外层主表单绑定的ngSubmit事件，直接执行sendData()提交逻辑，完全符合原生表单行为。

方案2：兼容现有结构的手动触发方案 #

如果暂时无法调整现有嵌套表单结构，可以通过Angular模板引用变量获取主表单实例，在最后一步提交时手动触发主表单提交逻辑：

1. 首先给主表单添加模板引用变量，最后一个子表单提交时传入该引用：

<form #mainForm="ngForm" class="main-form" [formGroup]="form" (ngSubmit)="sendData()">
  <form *ngIf="currentQuestion === 1" class="form" (submit)="nextQuestion()" formGroupName="nameQuestion"></form>
  <form *ngIf="currentQuestion === 3" class="form" (submit)="nextQuestion()" formGroupName="phoneQuestion"></form>
  <form *ngIf="currentQuestion === 4" class="form" (submit)="nextQuestion()" formGroupName="marketsQuestion"></form>
  <form *ngIf="currentQuestion === 5" class="form" (submit)="nextQuestion(mainForm)" formGroupName="biographyQuestion"></form>
</form>

2. 在TS类的nextQuestion方法中增加步骤判断，最后一步时手动触发主表单提交：

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

// 类内方法
nextQuestion(mainForm?: NgForm) {
  // 先执行当前步骤的表单校验逻辑，校验通过后再走后续流程
  if (this.currentQuestion === 5) {
    // 处于最后一步时，手动触发主表单提交事件
    mainForm.ngSubmit.emit();
    return;
  }
  // 非最后一步执行原有步骤切换逻辑
  this.currentQuestion++;
}

注意：该方案仅为临时兼容方案，嵌套表单的写法本身不符合HTML规范，长期维护建议优先使用方案1调整结构。

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