同一页面多表单场景下Angular ArchWizard修改stepIndex跳转特定步骤

要实现根据表单输入灵活跳转到不同的Wizard步骤，核心是获取ArchWizard组件的实例，直接控制它的stepIndex属性（或是使用内置的goToStep()方法）。下面是具体的实现方案：

1. 获取Wizard组件引用 #

首先在你的组件类中，用@ViewChild获取AwWizardComponent的实例，这样就能在代码里直接操控步骤跳转：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { AwWizardComponent } from 'angular-archwizard';

@Component({
  selector: 'app-login-wizard',
  templateUrl: './login-wizard.component.html',
  styleUrls: ['./login-wizard.component.css']
})
export class LoginWizardComponent {
  @ViewChild(AwWizardComponent) wizard!: AwWizardComponent;
  @ViewChild('loginInput') loginInput!: ElementRef<HTMLInputElement>;

  // 处理第一个表单的提交逻辑
  onFirstFormSubmit(event: Event) {
    event.preventDefault(); // 阻止默认表单提交行为
    const inputValue = this.loginInput.nativeElement.value.trim();

    // 根据输入内容判断跳转目标步骤
    const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inputValue);
    if (isEmail) {
      // 跳转到密码步骤（索引为2，步骤从0开始计数）
      this.wizard.stepIndex = 2;
      // 也可以用内置方法：this.wizard.goToStep(2);
    } else {
      // 跳转到验证码步骤（索引为1）
      this.wizard.stepIndex = 1;
    }
  }

  // 验证码表单提交逻辑
  onVerificationSubmit(event: Event) {
    event.preventDefault();
    // 这里添加验证码验证逻辑，验证通过后完成登录或后续操作
  }

  // 密码表单提交逻辑
  onPasswordSubmit(event: Event) {
    event.preventDefault();
    // 这里添加密码验证逻辑，验证通过后完成登录
  }
}

2. 更新模板代码 #

修改你的模板，给表单绑定提交事件，同时给输入框添加模板引用变量，方便获取用户输入值：

<aw-wizard>
  <aw-wizard-step>
    <form role="form" (ngSubmit)="onFirstFormSubmit($event)">
      <div>
        <label class="text-left">Enter Email or Mobile to Login</label>
        <input class="form-control" placeholder="enter email and phone number" type="text" #loginInput>
      </div>
      <div class="text-center">
        <button type="submit">Next</button>
      </div>
    </form>
  </aw-wizard-step>

  <aw-wizard-step>
    <form role="form" (ngSubmit)="onVerificationSubmit($event)">
      <div class="first-s" id="phone">
        <div class="form-group mt-3">
          <label class="text-left">Enter Verification Code</label>
          <input class="form-control" placeholder="code" type="text">
        </div>
        <div class="text-center">
          <button type="submit">Login</button>
        </div>
      </div>
    </form>
  </aw-wizard-step>

  <aw-wizard-step>
    <form role="form" (ngSubmit)="onPasswordSubmit($event)">
      <div class="second-s">
        <div class="form-group mt-3">
          <label class="text-left">Enter Password</label>
          <input class="form-control" placeholder="Password" type="password">
        </div>
        <button type="submit">Login</button>
      </div>
    </form>
  </aw-wizard-step>
</aw-wizard>

3. 关键注意事项 #

• 步骤索引规则：ArchWizard的步骤索引从0开始计数，第一个步骤对应index=0，第二个是index=1，以此类推。
• 模块导入：确保你已经在NgModule中导入了ArchwizardModule，否则组件无法正常使用：

  import { ArchwizardModule } from 'angular-archwizard';
  
  @NgModule({
    imports: [
      // ...其他模块
      ArchwizardModule
    ]
  })
  export class YourModule { }
  

• 跳转方法选择：设置stepIndex和调用goToStep()方法效果基本一致，你可以根据个人习惯选择其中一种。

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