Validation on single form with multiple steps

[remib]

Hi, me again, sorry!

I'm having an issue with the validity of the form between steps. I'd like to use only one form tag throughout multiple steps and check for validity of required fields between each step.

I'm defining the form tags within the multi-step-container element like so:

<form name="formName" form-step-validity>
            <main step-container></main>
</form>

For this reason, the validity of the form is false until all required fields are filled out throughout the entire form within each step. I thought about checking if the form is valid through ng-model validation then setting the validity of the step but this only works if I include the form tags within each step individually.

I don't know if my method is recommended but at the end of the form I just want one object with all the data from each step. Is this possible?

Cheers

[troch]

For this reason, the validity of the form is false until all required fields are filled out throughout the entire form within each step

Sounds about right. If a field is required, then your form cannot be valid until those fields are filled.

Whether you wrap your form around or within the step container, it should have roughly the same result: each form element in Angular registers itself with its parent form when created and de-registers itself when destroyed. For that reason, the reported validity is for the currently present form elements.

[remib]

Ok, I understand that. Is my issue not something that is essential for a multistep form, though?

It's a multistep-form, meaning it's one form with mulitple steps. I'd like to disable the 'Next' button until the fields in the current step are valid, not all fields in the form.

[troch]

That sounds a bit weird, it shouldn't normally be concerned about validity of other steps as only elements for the current step are present.

[remib]

I've just done some more tests and it does seem like the module is fussy about where the <form> tags are placed. Interestingly, ng-model validation does not work at all if the <form> tags are placed around the step-container; valid is always true. I believe the same can be said for the validation within the module, validation does not appear to function if the form tags are not within the step-container.

Once I place the <form> tag within the step template, everything works as expected but I want to avoid using a new<form> tag for every step as I have > 20 steps in 4 forms.

Thanks again

[troch]

Using a <form> tag in every step is not really an issue. Only one is present at any time. I would recommend doing it that way, it probably removes a few edge cases.

I need to have a look anyway.

[remib]

Yeh ok, it does seem to do the trick. I had it in my mind that I'd end up with loads of objects at the end but the data is tied to ng-model, not the form name. Cheers.