Ng-If-4

 

In this example, We will have a textbox with type email and this textbox has required attribute and It will give error if the user will type incorrect format or empty.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> .email { background: maroon; color: white; padding: 5px; border-radius: 5px; margin-top: 15px; position: relative; } </style> </head> <body ng-app> <div class="container"> <form name="userForm" novalidate> <div class="field"> <label for="emailAddress">Enter your email address:</label> <input type="email" class="form-control" name="emailAddress" ng-model="data.email" required /> <div class="email" ng-if="userForm.emailAddress.$error.required && userForm.emailAddress.$dirty"> Email is mendatory field. </div> <div class="email" ng-if="userForm.emailAddress.$error.email"> This email did not correct. </div> </div><br /> <input type="submit" class="btn btn-primary" /> </form> </div> </body> </html>
Output