Skip to content
This repository was archived by the owner on Feb 2, 2019. It is now read-only.

Commit 962446d

Browse files
author
codekraft-studio
committed
added example
1 parent 62d502d commit 962446d

File tree

1 file changed

+152
-0
lines changed

1 file changed

+152
-0
lines changed

‎example/index.html

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Angular Async Validation | codekraft-studio</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<style>
8+
header {
9+
background-color: #159957;
10+
background-image: linear-gradient(120deg, #155799, #159957);
11+
color: whitesmoke;
12+
margin-bottom: 40px;
13+
}
14+
header .container {
15+
padding: 40px 0;
16+
}
17+
header h1, h2 {
18+
margin: 0 0 0.2em 0;
19+
}
20+
header h2 {
21+
margin: 0 0 0.5em 0;
22+
}
23+
input.ng-pending {
24+
border: thin solid #ffc107 !important;
25+
}
26+
input.ng-invalid-async-validator {
27+
border: thin solid #f44336 !important;
28+
}
29+
input.ng-valid-async-validator {
30+
border: thin solid #4caf50 !important;
31+
}
32+
button[disabled], html input[disabled] {
33+
cursor: not-allowed;
34+
}
35+
</style>
36+
</head>
37+
<body ng-controller="MainCtrl">
38+
39+
<header>
40+
<div class="container">
41+
<h1>angular-async-validation</h1>
42+
<h2>the multi purpose async validation directive.</h2>
43+
</div>
44+
</header>
45+
46+
<div class="container">
47+
48+
<div class="row">
49+
50+
<div class="col-md-6">
51+
52+
<h2>Validation Example</h2>
53+
54+
<p>Enter a username to attempt the validation process.</p>
55+
56+
<form name="Form" ng-submit="addUser()">
57+
58+
<div class="form-group">
59+
60+
<div class="input-group">
61+
<input type="text" class="form-control" name="username" ng-model="myModel" placeholder="Enter your username" async-validation="myValidator" required />
62+
<span class="input-group-btn">
63+
<button class="btn btn-default" type="submit" ng-disabled="Form.$invalid || Form.$pending">ADD</button>
64+
</span>
65+
</div>
66+
67+
</div>
68+
69+
<div class="list-group">
70+
<p>Already used usernames that will cause validation to fail.</p>
71+
<li class="list-group-item" ng-repeat="username in usernames">{{username}}</li>
72+
</div>
73+
74+
<h2>Backend Validation</h2>
75+
76+
<p>If you try this input, it will check to a simulated backend API if the email already exists.</p>
77+
78+
<p>The only email that will fail the test for now is this: <strong>[email protected]</strong> all the other emails will resolve the validation.</p>
79+
80+
<div class="form-group">
81+
<input type="email" class="form-control" name="email" ng-model="otherModel" placeholder="Enter your email" async-validation="'api/test/:value'" required />
82+
<div style="margin-top: 5px;">
83+
<div class="alert alert-danger" ng-show="Form.email.$error.asyncValidator">This email is already taken.</div>
84+
<div class="alert alert-success" ng-show="Form.email.$valid">This email is free to use.</div>
85+
</div>
86+
</div>
87+
88+
</form>
89+
90+
</div>
91+
92+
<div class="col-md-6">
93+
<h2>Model Controller</h2>
94+
<pre>{{Form.username | json}}</pre>
95+
</div>
96+
97+
</div>
98+
99+
</div>
100+
101+
<script src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script></body>
102+
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
103+
<script type="text/javascript" src="dist/angular-async-validation.min.js"></script>
104+
<script>
105+
106+
angular.module('app', ['angular-async-validation']);
107+
108+
angular.module('app')
109+
.controller('MainCtrl', function($scope, $q, $timeout) {
110+
111+
$scope.myModel = '';
112+
113+
$scope.usernames = ['pippo', 'franco', 'bansky', 'skizo']
114+
115+
$scope.myValidator = function(modelValue, viewValue) {
116+
117+
// get the current value
118+
var value = modelValue || viewValue;
119+
120+
var deferred = $q.defer();
121+
122+
if( value === '' ) {
123+
124+
deferred.resolve();
125+
126+
} else {
127+
128+
$timeout(function() {
129+
130+
if( $scope.usernames.indexOf(value) === -1 ) {
131+
deferred.resolve();
132+
} else {
133+
deferred.reject();
134+
}
135+
136+
}, 1000);
137+
138+
}
139+
140+
return deferred.promise;
141+
142+
};
143+
144+
$scope.addUser = function() {
145+
$scope.usernames.push($scope.myModel);
146+
$scope.myModel = '';
147+
};
148+
149+
});
150+
151+
</script>
152+
</html>

0 commit comments

Comments
 (0)