[英]Angular material 2 stepper - next step
I have a simple stepper with two steps.我有一个简单的步进器,有两个步骤。
On the first step there is a form with two radio inputs.第一步有一个带有两个无线电输入的表单。 I want to switch to the next step by clicking on one of the radio (without any submit buttons).
我想通过单击其中一个收音机(没有任何提交按钮)切换到下一步。 I'm using
stepper.next()
method to achieve this.我正在使用
stepper.next()
方法来实现这一点。
The problem is - it switching to the next step only after two clicks on the radio inputs.问题是 - 只有在无线电输入上单击两次后,它才会切换到下一步。
Is there any way to switch to the next step by clicking only once?有没有办法只点击一次就切换到下一步?
Here's a demo with the problem https://angular-srtsoi.stackblitz.io这是一个有问题的演示https://angular-srtsoi.stackblitz.io
Editor: https://stackblitz.com/edit/angular-srtsoi?embed=1&file=app/stepper-overview-example.ts编辑器: https : //stackblitz.com/edit/angular-srtsoi?embed=1&file= app/ stepper-overview-example.ts
Thats because you call stepper.next()
before your validity status on your form
updates to VALID
.那是因为您在
form
上的有效性状态更新为VALID
之前调用stepper.next()
。 So the stepper thinks your form is invalid and locks your step.所以步进器认为您的表单无效并锁定您的步骤。
To handle this kind of race condition you can subscribe
to your formGroup statusChange
observable and call stepper.next()
when the status is valid:要处理这种竞争条件,您可以
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); } ) } }
The validity status of your form hasn't been updated before you called stepper.next().在您调用 stepper.next() 之前,您的表单的有效性状态尚未更新。 Since you have exclusively bound the code written in nextStepper() to the click event of the radio buttons, you can rest assured that it will be called only when the user clicks on either of the radio buttons.
由于您已将 nextStepper() 中编写的代码专门绑定到单选按钮的单击事件,因此您可以放心,只有当用户单击任一单选按钮时才会调用它。 So, in a way you have already implemented the required validation yourself and do not need angular to perform the validation for you.
因此,在某种程度上,您已经自己实现了所需的验证,并且不需要 angular 来为您执行验证。
Solution 1: Replace解决方案 1:更换
firstCtrl: ['', Validators.required] with the following code
firstCtrl: ['']
OR或
Solution 2: Remove the error from the form control manually before calling stepper.next() like so解决方案 2:在像这样调用 stepper.next() 之前手动从表单控件中删除错误
this.firstFormGroup.controls['firstCtrl'].setErrors(null)
stepper.next();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.