Today in this tutorial we will learn about performing form validation in our angular application. Before proceding to this tutorial please have a look at the previous article about this topic through this link. Part 4 Link . So, in this tutorial we will validate the form that we created in the previous tutorial. First of all, let us discuss about the importance of form validation. Do we really need form validation? It is not a compulsion but just imagine you entered a certain form and then clicked a submit button to process your request. it took few seconds to process your request in server and then you got an error saying that request was not completed because of some missing required fields. and again you need to resubmit the form after entering the required field. How about, if you could get the notification about the validation error or any other error before submiting the form. it could save some time. Moreover, it will also increase the user experience. So, It is better to perform Form validation before processing the request in the server. Now, let us begin to perform the form validation.
First of all, in the previous form that we created add the required field in the form inputs as shown in figure below:
Now, let us run this app and test some few things. To do so, enter ng serve in the console and navigate to the form localhost:2200/user in our case. Here we can see the form that we created in our previous part. Right click and click inspect elements to inspect elements to check the form input which is shown below:
Here, I right clicked on "Name" Input and then clicked "Inspect Elements" and there in the console window we can see some other attributes and class which are added by our angular app. Let's ignore other elements and have a look at the class that we see. The class that we see are ng-pristine, ng-invalid and ng-touched. Now, let us input some character in the name field and then again inspect element. there we see the following classes in the input field which is shown below:
Here, the changed class is ng-valid. which means if the form control has a class of ng-valid then, the input is correct else it is not. So, now what we will try to do is if the input field is valid we will make the border of input field with success color(green) else, if the form is invalid we will make the border color red. so, navigate to styles.css file which is inside "src" and then add following style in it.
Now, let us run our angular app and check if it works or not? the sreenshot below shows the output after performing these operations.
So, the styles are working properly, but we have a problem here, we can still submit the application because we have click event on submit button. Now, let us make few adjustment,we will disable the submit button if the form is not validated. To do this changes, just copy the form elements into user.component.html page with the following elements: