角形材料 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();