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。因此，步进器认为您的表单无效并锁定您的步骤。

要处理此类竞争条件，您可以{form} subscribe对您的formGroup statusChange进行观察，并在状态有效时致电stepper.next()：

＆＃13;

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);
      }
    )
  }
}

＆＃13;

Answer 2

在调用stepper.next（）之前，表单的有效性状态尚未更新。由于您已将nextStepper（）中编写的代码专门绑定到单选按钮的click事件，因此可以放心，只有当用户单击两个单选按钮时，才会调用该代码。因此，以某种方式，您已经自己实现了所需的验证，并且不需要用角度来为您执行验证。

解决方案1：替换

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

或

解决方案2：像这样调用stepper.next（）之前，从表单控件中手动删除错误

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

角材料2步进 - 下一步

2 个答案: