To turn off the order button if the form is invalid, I need to find out if my overall form is invalid
and how do we find this out? In the end,
there are of course a couple of ways, we could for example add a controls array to our orderForm and now
add all the controls to that and then add another property which is valid for the overall form and we
update this when ever the user enters values.
Now this would require quite some refactoring here and it's only one approach, we can of course also
simply add a new property in our state,
so after our orderForm which is this object, we could add a FormIsValid property which is false initially
which we now want to update,
so whatever you like, you can use both approaches and then in inputChangedHandler,
so whenever we type, I in the end want to check if all elements are valid right now and if they are all
valid, I'll set this FormIsValid state to valid.
So here I'll add a new constant, constant
is FormIsValid also to false
and then, I now need to check all my inputs for their validity.
So here, I'll simply for a loop through all my input identifiers,
in updated orderForm, this is the state object which contains all my elements and I want to set
FormIsValid here, should be a variable
therefore, I want to set this equal to updatedOrderForm,
select a given identifier, input identifier,
this should also be input identifier, singular and there, access this valid property,
so the property we're setting here in the end but here we're setting it for one element, here I'm looping
through all the elements.
I not only want to set it to this because then again, we would run into the problem that only the last
check is the one determining the value of FormIsValid,
so therefore I'll switch FormIsValid to true initially and check is this given element valid and is
FormIsValid in general true? Only if both is the case, FormIsValid is updated to true
and if this is false and FormIsValid was true then the resulting value will be false and FormIsValid
will be set to false because false overrides true.
And with tha,t I can then set my state and not only set the order form but also set FormIsValid
equal to FormIsValid,
so to my variable here. So again, the right side here, FormIsValid is referring to my variable,
FormIsValid, the left side is referring to the property in the state
I want to update
which of course is this FormIsValid property here.
So with that, we should now know the overall form validity
and this allows us to disable the button.
So I'll bind the diabled attribute on the button to this state FormIsValid or to be precise, to
the opposite
only if the form is not valid,
this should be disabled. So disable is true if the form is not valid.
Let's save
this and let's see the result.
We actually have to inspect the button because we have no special styling for invalid buttons and we
see right at the start, it is treated as valid
unfortunately because it is not disabled.
If I enter something here, this never changes,
so our button isn't really updated with the state of our form,
it's not really using our validity,
why? Well because we use our own button element and there, we don't know a disabled property.
We have to go to our button element and there, we can set disabled on this button and set it to props.disabled
.
So to that property I just defined because you have to remember, we are not using the original hrml button
there,
we're using our own implementation
so there we need to expect a disabled prop and pass it on to the native button disabled attribute.
With that if we save all files and go back,
now you see it's disabled at the start
and if I enter something here, let's fill out all these inputs here with valid data.
So now it should become valid except for that it doesn't
so let's find out why is the validity not updated correctly. In the contact data component,
it looks like we're not setting FormIsValid to true even if the whole form should be valid.
Let's confirm this by logging FormIsValid here in the inputChangedHandler
and let's go back, open the console log and enter something in all these fields and you'll see, it's
constantly undefined,
why is that?
This is related to our inputs,
remember we have this dropdown which doesn't have any validation rules attached to it.
Now it also doesn't have a valid property therefore
and if we then loop through all the elements and use this valid attribute, it of course isn't true or
false for the dropdown, it's undefined and undefined is always treated as false
but it also never changes to true.
So a way to fix this is to simply still add this valid property to the dropdown even though it of course
doesn't have any validation rules
but therefore it should always be valid,
so that's our delivery method dropdown. With that changed,
if we now enter something valid into all these fields, let me inspect the order,
if I now enter a valid email address here, you'll see the button becomes enabled.
Now I can remove a method I added for debugging to my inputChangedHandler and now of course, we also
need to adjust the button.
So on the button, we now need a special styling if it's disabled,
so let's go to button.css and there, I'll add a special class for my button class special styling I
should say, for the disabled pseudo selector
I want to set the color to this gray-ish look so that the button really looks disabled.
Let's also set the cursor to not allowed here so that the cursor also reflects that we can't click
this,
now we're also showing that this is disabled.
Now let's turn our heads towards a tiny error you might already have discovered. If we changed a
value in the dropdown, we actually get an error message related to our validation.
Let's fix this error in the next lecture.