Form Validation In AngularJS

In this article, we will learn about how we can validate a form in AngularJS.

AngularJS offers client-side form validation.

Example

Open the Example1.html file and add the code in it.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <title></title>
    <style>
        .labelWarning {
            color: #FF0000;
        }
    </style>
</head>
<body ng-app="">
    <h2>Form Validation In AngularJS</h2>
    <form name="myForm">
        <table>
            <tr>
                <td>User Name</td>
                <td>
                    <input name="txtName" ng-model="txtName" required>
                    <span class="labelWarning" ng-show="myForm.txtName.$touched && myForm.txtName.$invalid">User Name is required.</span>
                </td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
                    <input type="email" name="txtEmail" ng-model="txtEmail" required>
                    <span class="labelWarning" ng-show="myForm.txtEmail.$touched && myForm.txtEmail.$invalid">
                        <span ng-show="myForm.txtEmail.$error.required">Email is required.</span>
                        <span ng-show="myForm.txtEmail.$error.email">Invalid Email address.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>Mobile Number</td>
                <td>
                    <input type="text" name="txtMobile" ng-model="txtMobile" ng-pattern="/^[0-9]{10,10}$/" maxlength="10" required>
                    <span class="labelWarning" ng-show="myForm.txtMobile.$touched && myForm.txtMobile.$invalid">
                        <span ng-show="myForm.txtMobile.$error.required">Mobile Number is required.</span>
                        <span ng-show="myForm.txtMobile.$error.pattern">Mobile Number should be 10 digits.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><br /><input type="submit" ng-disabled="myForm.$invalid"></td>
            </tr>
        </table>
    </form>
</body>
</html>

The HTML5 required attribute, to specify that the input field must be filled out.
The AngularJS $touched state returns true if a control has lost focus.
The AngularJS $invalid state returns true if the model is invalid.
The AngularJS $error object contains all the validation attributes applied to the specified control.
The AngularJS ng-pattern directive is used to add up a regex pattern validator to ngModel on <input> element.
The HTML5 maxlength attribute, to specifies the maximum number of characters allowed in the <input> element.
The AngularJS $invalid state returns true if the form content is not valid.

Output:

Also, check How To Call API In AngularJS

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.