Index.html
1: <!DOCTYPE html>
2: <html ng-app="myapp" >
3: <head>
4: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
5: <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
6: <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
7: <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
8: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
9: <script src="../Controller/app.js"></script>
10: <script src="../Controller/MyController.js"></script>
11: <link rel="stylesheet" type="text/css" href="../Style/style.css">
12: <title></title>
13: </head>
14: <form name="myForm" novalidate>
15: <br><br><br>
16: Name ::<br>
17: <input
18: type="text"
19: ng-model="txtName"
20: name="txtName"
21: minlength="4"
22: required
23: ><br><br>
24: Email::<br><input type="email" required><br><br><br>
25: </form>
26: <h1>{{myForm.txtName.$valid}}</h1>
27: </html> Style.css
.form-control {
min-width: 0;
width: auto;
display: inline;
}
.form-control.ng-invalid.ng-dirty{
border-color:red !important;
border-left:6px solid red;
font-size:inherit !important;
}
input.ng-invalid.ng-dirty {
border: 1px solid red;
}
On blur its firing the validation
No comments:
Post a Comment