Angular Material 2步进器-下一步

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

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

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

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

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

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

最佳答案

那是因为您在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);
      }
    )
  }
}

关于Angular Material 2步进器-下一步，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48910866/