In this article, we will learn about how we can validate a form in AngularJS.
AngularJS offers client-side form validation.
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>
Output:
Also, check How To Call API In AngularJS
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular