Angular Material 2 Stepper：单选框单次点击跳转下一步问题求助

这种点击两次才跳转的情况，本质是表单状态更新和stepper切换的时机不匹配：当你第一次点击单选框时，Angular还没完成表单状态的更新（比如把表单标记为valid），这时候调用stepper.next()会因为当前步骤的表单未通过验证而失效；第二次点击时，表单状态已经更新完成，所以才能正常跳转。

下面给你几种简单有效的解决方法：

方法一：利用setTimeout延迟执行跳转 #

把stepper.next()放到setTimeout里，让它在Angular完成当前变更检测周期后再执行，这样就能确保表单状态已经更新：

模板代码 #

<mat-horizontal-stepper #stepper linear>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>第一步</ng-template>
      <mat-radio-group formControlName="option">
        <mat-radio-button value="opt1" (change)="handleOptionSelect(stepper)">选项1</mat-radio-button>
        <mat-radio-button value="opt2" (change)="handleOptionSelect(stepper)">选项2</mat-radio-button>
      </mat-radio-group>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>第二步</ng-template>
    <p>已成功进入第二步！</p>
  </mat-step>
</mat-horizontal-stepper>

组件代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';

@Component({
  selector: 'app-stepper-demo',
  templateUrl: './stepper-demo.component.html',
})
export class StepperDemoComponent {
  firstFormGroup: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 初始化表单，若需要必填验证可添加Validators.required
    this.firstFormGroup = this.fb.group({
      option: ['']
    });
  }

  handleOptionSelect(stepper: MatStepper) {
    // 延迟到下一个事件循环执行跳转
    setTimeout(() => {
      stepper.next();
    }, 0);
  }
}

方法二：监听表单控件的值变化 #

通过订阅单选框控件的valueChanges，在表单状态变为有效时自动触发跳转，这种方式更符合Angular的响应式表单理念：

组件代码修改 #

import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';

@Component({
  selector: 'app-stepper-demo',
  templateUrl: './stepper-demo.component.html',
})
export class StepperDemoComponent {
  firstFormGroup: FormGroup;
  @ViewChild('stepper') stepper!: MatStepper;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this.fb.group({
      option: ['']
    });

    // 监听单选框的值变化
    this.firstFormGroup.get('option')?.valueChanges.subscribe(() => {
      // 确认表单有效后跳转
      if (this.firstFormGroup.valid) {
        this.stepper.next();
      }
    });
  }
}

模板修改 #

此时可以去掉单选框上的(change)事件绑定，因为订阅valueChanges已经能监听选中状态变化。

方法三：手动触发变更检测 #

使用ChangeDetectorRef强制Angular立即完成变更检测，确保表单状态更新后再执行跳转：

组件代码 #

import { Component, ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';

@Component({
  selector: 'app-stepper-demo',
  templateUrl: './stepper-demo.component.html',
})
export class StepperDemoComponent {
  firstFormGroup: FormGroup;

  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.firstFormGroup = this.fb.group({
      option: ['']
    });
  }

  handleOptionSelect(stepper: MatStepper) {
    // 强制触发变更检测，更新表单状态
    this.cdr.detectChanges();
    stepper.next();
  }
}

注意事项 #

如果你的第一步表单要求必填，记得给option控件添加Validators.required，这样选中单选框后表单才会变为valid，stepper才能正常切换步骤。

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