I have a stepped container with a form in each step with the header, footers and submit button hidden in each form.
I would like to validate the form when progressing to the next step and cancel navigation when validation fails.
However, when i call "form.validate()" and subsequently check "form.invalid" to conditionally navigate the invalid property is always false. I have also tried adding the await modifier but it does not help. So the "form.validate()" method is not await, its returns immediately.
Is this a bug or is there a better way to handle validation per step?
As a work-around, using setTimeout to check the "form.invalid" property with a timeout of 500ms seems to do the trick, just make sure to await the call to "form.validate()" first.
Hi @cumminsj 
As a quick workaround, would adding some logic to the "Disabled" field of the next button work?
In this example, I am disabling the button if we're at the end of the container (default behavior) OR if the form is invalid by checking the form1.invalid property.
{{ steppedContainer1.currentViewIndex + 1 === steppedContainer1.viewKeys.length || form1.invalid }}
Hi @victoria
Thanks for the reply.
The problem with this solution is that I have the submit buttons are hidden because I want to trigger the validation when the next button is clicked.
I then collect all the forms data at the end of the steps and save it.
Oh, no worries at all. In my example, I've actually disabled the container "Next" button in my screenshot.
I've also hidden the form submit button if the form is invalid.
