All TalkersCode Topics

Follow TalkersCode On Social Media

AngularJS Form Validation Error Message

Last Updated : Jan 1, 2023

AngularJS Form Validation Error Message

In this tutorial we will show you the solution of angularjs form validation error message, using directive of ‘ng-model,ng-show’ we can validate user inputs when user typing inputs on input field and displays error message will guides user to type correct input as we expecting way.

We can use them in all form elements for validate all form inputs when user entering.

Step By Step Guide On AngularJS Form Validation Error Message :-

Here in our application form we defined input field for collect user input. When user starts entering inputs on input field it checks input whether match with we defined error type will occurred or not.

If error existing means it throws respective error near input field so user can understand which is error in our input then they can change and gives correct input.

We defined three errors those are for ‘checks minimum length of input, maximum length of input and not accept as empty input’ thrown error by $error.

$error object is used as data source for ng-messages directive with error messages.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Error Message</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    </head>
    <body>
        <div ng-app>
            <form name="fv">
            <input type="text" name="nm" ng-model="innm" ng-minlength="6" ng-maxlength="12" required>
            <p ng-show="fv.nm.$error.minlength">username should have at least 6 characters.</p>
            <p ng-show="fv.nm.$error.maxlength">username should have at most 12 characters.</p>
            <p ng-show="fv.nm.$error.required">providing username is mandatory.</p>
        </form>
        </div>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
  7. In <div> tag we declared our ng-app it defines our application within that we defined form with one input field.
  8. In input field for appending error message we defined attribute ‘name,ng-minlength,ng-maxlength’ with respective values.
  9. Below input tag we described errors by ng-show in <p> tag. Using ng-show our described message will displayed on webpage like error message near input field.
  10. In first <p> tag description when user enters below 6 characters as input in input field it will display as error by ‘ng-show’ value. It is checks form input minlength with value ‘6’ then if it fails it will display.
  11. In second <p> tag description when user enters above 12 characters as input in input field it will display as error by ‘ng-show’ value. It is checks form input maxlength with value ‘12’ then if it fails it will display.
  12. In third <p> tag description when user not entered any input on input field it will display as error by ‘ng-show’ value. It is checks form input required value then if it fails it will display.
  13. Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to display error message using angularjs.

When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.

In our program when user inputs affects predefined rules those respective will display near input field.

Using this we can create other type errors also and we can validate on webpage.

I hope this tutorial on angularjs form validation error message helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials