Hey all! I have a simple stepped container that takes the user through answering questions on a form component. I want to disable the next button in the stepped container until all required fields are filled out. I tried disabling the button by using: {{ form.invalid }} as well as {{ input1.invalid || input2.invalid....}}
It seems like only when data is filled then deleted in the inputs that the validation kicks in. If I click a value and write some data then delete it, it makes the form invalid but only for that field.
I figure I could check for each value and if null validate that way. I wanted to see if there is something I'm missing though as large forms can be a pain to have to check each individual field.
I found another post in our forum about validating forms inside of stepped containers. It looks like there is a solution marked where the user combined some steps from previous commenters along to get the intended validation logic.
Hopefully that helps to solve the issue for you!
That is odd behavior that the validation only kicks in once data has been entered in and then deleted. I will look to reproduce this and file a bug report for you once I can confirm the steps for reproduction.
It looks like you removed the form's default submit button, is that correct? So that the 'Next' button has event logic for submitting the form and moving to the next step, correct?
Could you share the inspector panel for how the from component is set up?
In my attempt to reproduce it looks like there is a toggle box to make sure the form can't be submitted if any fields are invalid.
My thinking is that you might need to break up the button logic so that this built in logic will keep the form from being submitted until it is filled out.
Then when the form submits, you can flip a boolean variable you created, such as 'disableNext' which you can set to 'True' on page load, and on success of the form submit query set this variable to 'False' which and put this variable inside the stepped container's 'Disabled' field!
