Validating input fields
It holds user information in its state, and is supposed to save new user to the server in component wrapper.
Let it handle how validation error will appear in UI.
We can then evaluate a particular condition on every value change, and do something based on it. We used a simple expression to compute whether the button should be disabled (aka when either of email or password was empty): It got the job done.
As a little refresher from before: Using controlled inputs implies we are storing all the input values in our state.
The fields are marked red by default, because empty fields are invalid but… Also, the fields are still red while focused for the first time. We are going to do that by adding the class if the field was in focus at least once but has since been blurred.
This ensures that the first time a user focuses the field, the error won’t appear right away, but instead, only when the field is blurred.
Now, to mark the bad inputs, we need to ask ourselves a couple of questions. Well, it’s all about the experience you want to provide. For the purpose of this post, I’m going to do with the simplest one — marking red the bad inputs, without anything else.There are several types of things we can do, which might be referred to as “validation”.Their have common purpose — to prevent wrong user input as soon as possible. Difference of the real application is that it needs form inputs validation, which can make your code look like a mess.I will demonstrate that V pattern is very powerful abstraction, and it will help us to handle forms validation in simple and elegant way.If we let our form do it, it will look pretty ugly. Let's go through and add an error message for each of our inputs if they are not Now our form has the correct Bootstrap error classes.Sometimes it is not desirable to show errors while a user is typing.The errors currently show immediately as a user is typing into the form.This happens because of Angular's great data-binding feature.Now that we know how we want to display the errors AND know how to represent them, there’s something crucial missing.Or, another way to put it is, how to take existing inputs, validate then and get the error object we need?