Skip to content

Commit 9da049f

Browse files
committed
docs(guide/forms, input): add information how to modify built-in validators
Closes angular#5757 Closes angular#7798
1 parent a52ccc8 commit 9da049f

File tree

2 files changed

+51
-0
lines changed

2 files changed

+51
-0
lines changed

docs/content/guide/forms.ngdoc

+39
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,45 @@ In the following example we create two directives:
365365
</file>
366366
</example>
367367

368+
# Modifying built-in validators
369+
370+
Since Angular itself uses `$validators`, you can easily replace or remove built-in validators, should you find it necessary. For example, if you think the email regex isn't strict enough, the following example shows you how to override it. Note that you can alternatively use `ng-pattern` to further restrict the validation.
371+
372+
<example module="form-example-modify-validators">
373+
<file name="index.html">
374+
<form name="form" class="css-form" novalidate>
375+
<div>
376+
Email:
377+
<input type="email" ng-model="myEmail" name="myEmail" />{{myEmail}}<br />
378+
<span ng-show="form.myEmail.$error.email">This email format is not supported!</span>
379+
</div>
380+
</form>
381+
</file>
382+
383+
<file name="script.js">
384+
var app = angular.module('form-example-modify-validators', []);
385+
386+
app.directive('input', function() {
387+
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z]([a-z0-9-]*[a-z0-9])?(\.[a-z]([a-z0-9-]*[a-z0-9])+)+$/i;
388+
389+
return {
390+
require: 'ngModel',
391+
restrict: 'E',
392+
link: function(scope, elm, attrs, ctrl) {
393+
if (ctrl && attrs.type === 'email') {
394+
// only apply the validator if ngModel is present and the input is type email
395+
396+
// this is the default implementation copied from Angular, which will override the default and use our custom regex
397+
ctrl.$validators.email = function(value) {
398+
return ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value);
399+
};
400+
}
401+
}
402+
};
403+
});
404+
</file>
405+
</example>
406+
368407

369408
# Implementing custom form controls (using `ngModel`)
370409
Angular implements all of the basic HTML form controls ({@link ng.directive:input input}, {@link ng.directive:select select}, {@link ng.directive:textarea textarea}), which should be sufficient for most cases.

src/ng/directive/input.js

+12
Original file line numberDiff line numberDiff line change
@@ -650,6 +650,12 @@ var inputType = {
650650
* Text input with URL validation. Sets the `url` validation error key if the content is not a
651651
* valid URL.
652652
*
653+
* <div class="alert alert-warning">
654+
* **Note:** `input[url]` uses a regex to validate urls that is derived from the regex
655+
* used in Chromium. If you need stricter validation, you can use `ng-pattern` or modify
656+
* the built-in validators (see the {@link guide/forms Forms guide})
657+
* </div>
658+
*
653659
* @param {string} ngModel Assignable angular expression to data-bind to.
654660
* @param {string=} name Property name of the form under which the control is published.
655661
* @param {string=} required Sets `required` validation error key if the value is not entered.
@@ -727,6 +733,12 @@ var inputType = {
727733
* Text input with email validation. Sets the `email` validation error key if not a valid email
728734
* address.
729735
*
736+
* <div class="alert alert-warning">
737+
* **Note:** `input[email]` uses a regex to validate email addresses that is derived from the regex
738+
* used in Chromium. If you need stricter validation (e.g. requiring a top-level domain), you can
739+
* use `ng-pattern` or modify the built-in validators (see the {@link guide/forms Forms guide})
740+
* </div>
741+
*
730742
* @param {string} ngModel Assignable angular expression to data-bind to.
731743
* @param {string=} name Property name of the form under which the control is published.
732744
* @param {string=} required Sets `required` validation error key if the value is not entered.

0 commit comments

Comments
 (0)