Skip to content

Commit c04af3f

Browse files
davidlgjdavidlgj
committed
Expose ngModel validatos, async validators etc
See examples/custom-validators.html for usage
1 parent 1c50ace commit c04af3f

File tree

2 files changed

+145
-0
lines changed

2 files changed

+145
-0
lines changed

‎examples/custom-validators.html

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Custom validators, async validators etc</title>
5+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
6+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
7+
</head>
8+
<body ng-app="test" class="container" ng-controller="TestCtrl">
9+
10+
<h3>Demo of custom validators, async validators and parsers</h3>
11+
<span>Check the source</span>
12+
<form name="theForm">
13+
<div sf-schema="schema" sf-form="form" sf-model="model"></div>
14+
<div>
15+
The form is <em ng-show="theForm.$pristine">pristine</em><em ng-show="theForm.$dirty">dirty</em>
16+
and <em ng-show="theForm.$valid">valid</em><em ng-show="!theForm.$valid">invalid</em>.
17+
</div>
18+
<div>{{prettyModel}}</div>
19+
</form>
20+
21+
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
22+
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
23+
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
24+
25+
<script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
26+
27+
<script type="text/javascript" src="../dist/schema-form.js"></script>
28+
<script type="text/javascript" src="../dist/bootstrap-decorator.min.js"></script>
29+
30+
<script>
31+
angular.module('test', ['schemaForm']).controller('TestCtrl', function($scope, $q, $timeout) {
32+
33+
$scope.schema = {
34+
"type": "object",
35+
"title": "Comment",
36+
"properties": {
37+
"name": {
38+
"title": "Name",
39+
"type": "string"
40+
},
41+
"email": {
42+
"title": "Email",
43+
"type": "string",
44+
"pattern": "^\\S+@\\S+$",
45+
"description": "Email will be used for evil."
46+
},
47+
"comment": {
48+
"title": "Comment",
49+
"type": "string"
50+
}
51+
},
52+
"required": ["name","email","comment"]
53+
};
54+
55+
$scope.form = [
56+
{
57+
key: 'name',
58+
placeholder: 'Anything but "Bob"',
59+
$asyncValidators: {
60+
'async': function(name) {
61+
var deferred = $q.defer();
62+
$timeout(function(){
63+
if (angular.isString(name) && name.toLowerCase().indexOf('bob') !== -1) {
64+
deferred.reject();
65+
} else {
66+
deferred.resolve();
67+
}
68+
}, 500);
69+
return deferred.promise;
70+
}
71+
},
72+
validationMessage: {
73+
'async': "Wooohoo thats not an OK name!"
74+
}
75+
76+
},
77+
{
78+
key: 'email',
79+
placeholder: 'Not MY email',
80+
ngModel: function(ngModel) {
81+
ngModel.$validators.myMail = function(value) {
82+
return value !== 'david.lgj@gmail.com';
83+
};
84+
},
85+
validationMessage: {
86+
'myMail': "Thats my mail!"
87+
}
88+
},
89+
{
90+
"key": "comment",
91+
"type": "textarea",
92+
"placeholder": "Make a comment, write 'damn' and check the model",
93+
$parsers: [
94+
function(value) {
95+
if (value && value.replace) {
96+
return value.replace(/(damn|fuck|apple)/,'#!@%&');
97+
}
98+
return value;
99+
}
100+
]
101+
},
102+
{
103+
"type": "submit",
104+
"style": "btn-info",
105+
"title": "OK"
106+
}
107+
];
108+
109+
$scope.model = {};
110+
111+
$scope.$watch('model', function(value){
112+
if (value) {
113+
$scope.prettyModel = JSON.stringify(value, undefined, 2);
114+
}
115+
}, true);
116+
117+
});
118+
119+
</script>
120+
121+
122+
</body>
123+
</html>

‎src/directives/schema-validate.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,28 @@ angular.module('schemaForm').directive('schemaValidate', ['sfValidator', 'sfSele
5757
return viewValue;
5858
};
5959

60+
// Custom validators, parsers, formatters etc
61+
if (typeof form.ngModel === 'function') {
62+
form.ngModel(ngModel);
63+
}
64+
65+
['$parsers', '$viewChangeListeners', '$formatters'].forEach(function(attr) {
66+
if (form[attr] && ngModel[attr]) {
67+
form[attr].forEach(function(fn) {
68+
ngModel[attr].push(fn);
69+
});
70+
}
71+
});
72+
73+
['$validators', '$asyncValidators'].forEach(function(attr) {
74+
// Check if our version of angular has i, i.e. 1.3+
75+
if (form[attr] && ngModel[attr]) {
76+
angular.forEach(form[attr], function(fn, name) {
77+
ngModel[attr][name] = fn;
78+
});
79+
}
80+
});
81+
6082
// Get in last of the parses so the parsed value has the correct type.
6183
// We don't use $validators since we like to set different errors depeding tv4 error codes
6284
ngModel.$parsers.push(validate);

0 commit comments

Comments
 (0)