Angular4+angular-archwizard分步表单：仅验证当前步骤必填项需求

我之前在项目里用Angular 4结合angular-archwizard做多步骤响应式表单时，也踩过这两个坑，给你分享亲测有效的解决方案：

问题1：禁止未填完当前必填字段时跳转下一步 #

angular-archwizard自带的canExit钩子刚好能解决这个问题——它可以控制用户是否允许离开当前步骤。核心思路是：在用户尝试跳转前，触发当前步骤表单的全量验证，只有表单完全合法才允许进入下一步。

具体实现步骤： #

1. 在组件中，针对当前步骤的表单组定义验证方法：

// 假设你的步骤1表单组是step1Form（如果是主表单的子组，就取对应子组即可）
canExitStep1(): boolean {
  // 标记当前步骤所有表单控件为已触碰，确保错误提示能正常显示
  this.step1Form.markAllAsTouched();
  // 返回当前表单的合法性状态：true允许跳转，false阻止跳转
  return this.step1Form.valid;
}

2. 在模板的<aw-step>标签上绑定这个方法：

<aw-step [canExit]="canExitStep1">
  <!-- 步骤1的表单内容 -->
  <form [formGroup]="step1Form">
    <input formControlName="username" placeholder="用户名（必填）">
    <!-- 错误提示 -->
    <div *ngIf="step1Form.get('username').invalid && step1Form.get('username').touched">
      用户名不能为空
    </div>
    <!-- 其他表单控件 -->
  </form>
</aw-step>

这样设置后，用户没填完当前步骤必填项时，点击下一步会被直接阻止，同时页面会显示对应错误提示，引导用户补全信息。

问题2：切换步骤时仅验证当前步骤字段 #

如果你的所有步骤表单都属于同一个主表单组，默认切换步骤时Angular会触发整个表单的验证，导致未切换到的步骤也弹出错误提示。解决核心是只针对当前步骤的表单组做验证，不触发其他步骤的验证逻辑。

具体实现步骤： #

1. 先把每个步骤的表单拆分为主表单的独立子组（没这么做的话先调整结构）：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}

// 主表单包含所有步骤的子表单组
mainForm: FormGroup = this.fb.group({
  step1: this.fb.group({
    username: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]]
  }),
  step2: this.fb.group({
    address: ['', Validators.required],
    phone: ['', Validators.required]
  })
});

2. 针对每个步骤单独编写canExit验证方法，只验证当前步骤的子表单组：

canExitStep1(): boolean {
  const step1Form = this.mainForm.get('step1') as FormGroup;
  step1Form.markAllAsTouched();
  // 只检查步骤1的表单合法性，不涉及其他步骤
  return step1Form.valid;
}

canExitStep2(): boolean {
  const step2Form = this.mainForm.get('step2') as FormGroup;
  step2Form.markAllAsTouched();
  return step2Form.valid;
}

3. 在模板中，每个步骤的表单区域绑定对应的子表单组：

<!-- 步骤1 -->
<aw-step [canExit]="canExitStep1">
  <div formGroupName="step1" [formGroup]="mainForm">
    <input formControlName="username" placeholder="用户名（必填）">
    <div *ngIf="mainForm.get('step1.username').invalid && mainForm.get('step1.username').touched">
      用户名不能为空
    </div>
    <!-- 其他步骤1控件 -->
  </div>
</aw-step>

<!-- 步骤2 -->
<aw-step [canExit]="canExitStep2">
  <div formGroupName="step2" [formGroup]="mainForm">
    <input formControlName="address" placeholder="地址（必填）">
    <div *ngIf="mainForm.get('step2.address').invalid && mainForm.get('step2.address').touched">
      地址不能为空
    </div>
    <!-- 其他步骤2控件 -->
  </div>
</aw-step>

这样设置后，切换步骤时只会验证当前步骤的子表单组，其他步骤的表单控件不会被触发验证，自然也不会显示错误提示。

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