$form.valid fails to update when invalid control unmounts #913
Description
The Problem
When a Control with a validation error unmounts, the $form.valid boolean of its parent form model does not update to true.
Steps to Reproduce
Using the CodePen template, I have created a "user" form with two Control.text inputs, one for first name and one for last name. The form also has a checkbox that controls whether the last name control should be rendered. The last name Control has an isRequired-style validator. I've also added a div to the DOM that prints out the value of state.forms.user.$form.valid.
When I load the form, state.forms.user.$form.valid is true as expected because the last name control is not in the DOM. Clicking the checkbox turns state.forms.user.$form.valid to false, also as expected because we now have an invalid last name control. Clicking the checkbox again to remove the last name control should turn state.forms.user.$form.valid back to true, but it does not. state.forms.user.$form.valid remains false.
Reproducible Code Example
https://codepen.io/danielericlee/pen/Yxejzb?editors=1111
Interesting Aside
An interesting aside is that despite state.forms.user.$form.valid being false, the form submits successfully. I've traced through the code, and it looks like what is happening is that the initial check for validity here fails:
But when this.validate is called a few lines later with the submit flag set to true, the isValid expression here evaluates to true.
(That expression doesn't look at the
valid flag, and instead recursively digs through the model looking for errors objects).
Thus, handleValidSubmit gets called and the user-supplied onSubmit callback gets called.
Rationale
I am working on a multi-section form where I would like to use the $form.valid flag to figure out when the user is permitted to go to the next section. Modeling each section as its own object and checking the respective $form.valid flag seems like a really elegant way to model this behavior, but I've had to resort to implementing a recursive check for errors objects much like the isValid check in handleIntents.