Angular模板驱动表单多页独立表单：能否统一展示所有验证摘要？

当然能做到！虽说你的表单拆成了好几个独立的<form>标签，但它们都绑定同一个模型实例，咱们完全可以在一个固定位置把所有页面的验证错误都汇总展示出来。下面给你详细说说怎么实现：

1. 共享模型+标记表单引用 #

首先得保证所有页面的表单都绑定到组件类里同一个模型对象，比如userFormModel。同时给每个页面的<form>标签加个模板引用变量，比如第一页用#form1="ngForm"，第二页#form2="ngForm"，以此类推——这样组件类就能拿到每个表单的验证状态。

2. 在组件类中收集所有表单实例 #

用Angular的@ViewChildren装饰器，一次性获取所有<form>对应的NgForm实例：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-multi-step-form',
  templateUrl: './multi-step-form.component.html'
})
export class MultiStepFormComponent {
  // 共享的模型实例
  userFormModel = {
    name: '',
    email: '',
    address: '',
    // 其他表单字段...
  };

  // 收集所有表单实例
  @ViewChildren(NgForm) allForms!: QueryList<NgForm>;
}

3. 写个方法汇总所有验证错误 #

接下来写一个遍历所有表单、收集错误信息的方法，把每个无效且已触碰的控件错误都捞出来：

getAllValidationErrors(): string[] {
  const errorList: string[] = [];
  
  this.allForms.forEach(form => {
    // 遍历当前表单的所有控件
    Object.keys(form.controls).forEach(controlName => {
      const control = form.controls[controlName];
      
      // 只收集已触碰且无效的控件错误
      if (control.invalid && control.dirty) {
        if (control.errors?.['required']) {
          errorList.push(`${controlName} 是必填项`);
        }
        if (control.errors?.['email']) {
          errorList.push(`${controlName} 格式不符合邮箱要求`);
        }
        // 可根据你的验证规则添加更多错误提示
      }
    });
  });
  
  return errorList;
}

4. 在页面固定位置展示错误汇总 #

最后在你想展示验证摘要的地方（比如页面顶部、底部），用*ngFor循环渲染收集到的错误即可：

<!-- 统一的验证摘要展示区 -->
<div *ngIf="getAllValidationErrors().length > 0" class="error-summary">
  <h4>表单填写错误：</h4>
  <ul>
    <li *ngFor="let error of getAllValidationErrors()">{{ error }}</li>
  </ul>
</div>

<!-- 第一页表单 -->
<form #form1="ngForm" (ngSubmit)="handlePage1Submit()">
  <input type="text" name="name" [(ngModel)]="userFormModel.name" required>
  <!-- 其他第一页控件 -->
</form>

<!-- 第二页表单 -->
<form #form2="ngForm" (ngSubmit)="handlePage2Submit()">
  <input type="email" name="email" [(ngModel)]="userFormModel.email" required email>
  <!-- 其他第二页控件 -->
</form>

额外小技巧 #

• 切换页面时，可以调用this.allForms.forEach(form => form.markAllAsTouched());，强制所有表单控件标记为已触碰，这样用户切换页面就能即时看到所有错误。
• 给错误摘要区加个醒目的样式（比如红色字体、浅红背景），让用户一眼就能注意到。

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