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

- Dmitry

Answer 1

那是因为您在表单的有效性状态更新为“VALID”之前调用了stepper.next()。因此，步进器认为您的表单无效并锁定了您的步骤。

要处理这种竞争条件，您可以订阅您的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);
      }
    )
  }
}

- SplitterAlex

Answer 2

您调用stepper.next()之前，表单的有效状态尚未更新。由于您已经将nextStepper()中编写的代码专门绑定到单选按钮的单击事件上，因此可以放心，在用户单击任何单选按钮时，它将仅被调用一次。因此，您已经自行实现了所需的验证，不需要使用angular来执行验证。

解决方案1：替换

firstCtrl: ['', Validators.required] with the following code 
firstCtrl: ['']

或者

解决方案2：在调用stepper.next()之前，手动从表单控件中移除错误，如下所示。

this.firstFormGroup.controls['firstCtrl'].setErrors(null) 
stepper.next();

- Hinddeep S. Purohit