Validation on Angular Material Stepper

Question

My app has a stepper, one of the steps has 2 forms inside it, Main form and another form. The main form is the form that is required for the step control. The other form is optional (but still I want to validate the input if the user enters any input). Both forms are reactive forms.

The problem is that when I try to move to the next step in the stepper, the other form, is being validated and showing all the errors (though it's not the step control).

The desired behavior that I wish is that when I click the next step it wont affect the other form, and only validate the main form, what can I do in order to achieve it?

Welcome to SO! Please remember to include a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Such as what you've tried so far, what failed, what research you did. — Johan Rin, Dec 22 '18 at 11:15

score 2 · Answer 1 · answered Mar 13 '19 at 06:07

2

see this stackblitz example.

you can validate forms and prevent for switching between <mat-step>s, until errors disappear.

answered Mar 13 '19 at 06:07

Amir Azizkhani

1,662
17
30

Do you know how to get custom validators to react the same way? I'm having issues getting it to work. – James Mak Sep 11 '19 at 16:54
@JamesMak unfortunately i not use react yet. – Amir Azizkhani Sep 13 '19 at 16:45

Validation on Angular Material Stepper

1 Answers1