Angular Material 2 Stepper-下一步

Question

我有一个简单的步进器，分为两个步骤。

第一步，有一个带有两个无线电输入的表格。我想通过单击一个单选按钮（没有任何提交按钮）切换到下一步。我正在使用stepper.next()方法来实现这一目标。

问题是-仅在两次单击无线电输入后才切换到下一步。

是否可以通过仅单击一次来切换到下一步？

这是一个有问题的演示https://angular-srtsoi.stackblitz.io

编辑器：https : //stackblitz.com/edit/angular-srtsoi?embed=1&file= app/ stepper-overview-example.ts

Answer 1

那是因为您stepper.next()在form更新的有效状态之前先致电VALID。因此，步进器认为您的表单无效并锁定了您的步进。

要处理这种竞争情况，您可以subscribe对formGroup进行statusChange观察，并stepper.next()在状态有效时调用：

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

/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.css']
})
export class StepperOverviewExample {
  isLinear = true;
  firstFormGroup: FormGroup;

  @ViewChild('stepper') stepper: MatStepper;

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });

    this.firstFormGroup.statusChanges.subscribe(
            status => {
              if (status === 'VALID') {
                this.stepper.next();
              }
        console.log(status);
      }
    )
  }
}