角形材料 2 步进器 - 下一步

Question

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

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

问题是 - 只有在无线电输入上单击两次后，它才会切换到下一步。

有没有办法只点击一次就切换到下一步？

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

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

Answer 1

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

要处理这种竞争条件，您可以subscribe formGroup statusChange observable 并在状态有效时调用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); } ) } }

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