aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/dev_guide.templates.validators.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2011-06-06 08:50:35 -0700
committerIgor Minar2011-06-06 22:52:02 -0700
commit7f1e2e48467f80cc083d24b44f088620e4e7bcb6 (patch)
tree731a91366c5780985be6d4c5ddbe34e307d5cb70 /docs/content/guide/dev_guide.templates.validators.ngdoc
parent5533e48dead5cff3107e72ee80bf0f19df77c1e9 (diff)
downloadangular.js-7f1e2e48467f80cc083d24b44f088620e4e7bcb6.tar.bz2
new batch of docs
Diffstat (limited to 'docs/content/guide/dev_guide.templates.validators.ngdoc')
-rw-r--r--docs/content/guide/dev_guide.templates.validators.ngdoc160
1 files changed, 160 insertions, 0 deletions
diff --git a/docs/content/guide/dev_guide.templates.validators.ngdoc b/docs/content/guide/dev_guide.templates.validators.ngdoc
new file mode 100644
index 00000000..4976b8de
--- /dev/null
+++ b/docs/content/guide/dev_guide.templates.validators.ngdoc
@@ -0,0 +1,160 @@
+@workInProgress
+@ngdoc overview
+@name Developer Guide: Templates: Understanding Angular Validators
+@description
+
+
+Angular validators are attributes that test the validity of different types of user input. Angular
+provides a set of built-in input validators:
+
+
+* {@link api/angular.validator.phone phone number}
+* {@link api/angular.validator.number number}
+* {@link api/angular.validator.integer integer}
+* {@link api/angular.validator.date date}
+* {@link api/angular.validator.email email address}
+* {@link api/angular.validator.json JSON}
+* {@link api/angular.validator.regexp regular expressions}
+* {@link api/angular.validator.url URLs}
+* {@link api/angular.validator.asynchronous asynchronous}
+
+
+You can also create your own custom validators.
+
+
+# Using Angular Validators
+
+
+You can use angular validators in HTML template bindings, and in JavaScript:
+
+
+* Validators in HTML Template Bindings
+
+
+<pre>
+<input ng:validator="validator_type:parameters" [...]>
+</pre>
+
+
+* Validators in JavaScript
+
+
+<pre>
+angular.validator.[validator_type](parameters)
+</pre>
+
+
+The following example shows how to use the built-in angular integer validator:
+
+
+<doc:example>
+<doc:source>
+ Change me: <input type="text" name="number" ng:validate="integer" value="123">
+</doc:source>
+<doc:scenario>
+ it('should validate the default number string', function() {
+ expect(element('input[name=number]').attr('class')).
+ not().toMatch(/ng-validation-error/);
+ });
+ it('should not validate "foo"', function() {
+ input('number').enter('foo');
+ expect(element('input[name=number]').attr('class')).
+ toMatch(/ng-validation-error/);
+ });
+</doc:scenario>
+</doc:example>
+
+
+# Creating an Angular Validator
+
+
+To create a custom validator, you simply add your validator code as a method onto the
+`angular.validator` object and provide input(s) for the validator function. Each input provided is
+treated as an argument to the validator function. Any additional inputs should be separated by
+commas.
+
+
+The following bit of pseudo-code shows how to set up a custom validator:
+
+
+<pre>
+angular.validator('your_validator', function(input [,additional params]) {
+ [your validation code];
+ if ( [validation succeeds] ) {
+ return false;
+ } else {
+ return true; // No error message specified
+ }
+}
+</pre>
+
+
+Note that this validator returns "true" when the user's input is incorrect, as in "Yes, it's true,
+there was a problem with that input". If you prefer to provide more information when a validator
+detects a problem with input, you can specify an error message in the validator that angular will
+display when the user hovers over the input widget.
+
+
+To specify an error message, replace "`return true;`" with an error string, for example:
+
+
+ return "Must be a value between 1 and 5!";
+
+
+Following is a sample UPS Tracking Number validator:
+
+
+<doc:example>
+<doc:source>
+<script>
+angular.validator('upsTrackingNo', function(input, format) {
+ var regexp = new RegExp("^" + format.replace(/9/g, '\\d') + "$");
+ return input.match(regexp)?"":"The format must match " + format;
+});
+</script>
+<input type="text" name="trackNo" size="40"
+ ng:validate="upsTrackingNo:'1Z 999 999 99 9999 999 9'"
+ value="1Z 123 456 78 9012 345 6"/>
+</doc:source>
+<doc:scenario>
+it('should validate correct UPS tracking number', function() {
+ expect(element('input[name=trackNo]').attr('class')).
+ not().toMatch(/ng-validation-error/);
+});
+
+
+it('should not validate in correct UPS tracking number', function() {
+ input('trackNo').enter('foo');
+ expect(element('input[name=trackNo]').attr('class')).
+ toMatch(/ng-validation-error/);
+});
+</doc:scenario>
+</doc:example>
+
+
+In this sample validator, we specify a regular expression against which to test the user's input.
+Note that when the user's input matches `regexp`, the function returns "false" (""); otherwise it
+returns the specified error message ("true").
+
+
+Note: you can also access the current angular scope and DOM element objects in your validator
+functions as follows:
+
+
+* `this` === The current angular scope.
+* `this.$element` === The DOM element that contains the binding. This allows the filter to
+manipulate the DOM in addition to transforming the input.
+
+
+
+
+## Related Topics
+
+
+* {@link dev_guide.templates Angular Templates}
+
+
+## Related API
+
+
+* {@link api/angular.validator Validator API}