Angular material 2 stepper - next step
Thats because you call stepper.next() before your validity status on your form updates to VALID. 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:
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);
}
)
}
}