Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 18ba2cd

Browse files
committed
docs(ngModel): clarify usage of formatters / parsers and $setValidity
1 parent c2edef8 commit 18ba2cd

File tree

1 file changed

+16
-14
lines changed

1 file changed

+16
-14
lines changed

src/ng/directive/input.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1490,19 +1490,20 @@ var VALID_CLASS = 'ng-valid',
14901490
* @name ngModel.NgModelController
14911491
*
14921492
* @property {string} $viewValue Actual string value in the view.
1493-
* @property {*} $modelValue The value in the model, that the control is bound to.
1493+
* @property {*} $modelValue The value in the model that the control is bound to.
14941494
* @property {Array.<Function>} $parsers Array of functions to execute, as a pipeline, whenever
1495-
the control reads value from the DOM. Each function is called, in turn, passing the value
1496-
through to the next. The last return value is used to populate the model.
1497-
Used to sanitize / convert the value as well as validation. For validation,
1498-
the parsers should update the validity state using
1499-
{@link ngModel.NgModelController#$setValidity $setValidity()},
1500-
and return `undefined` for invalid values.
1495+
the control reads value from the DOM. The functions are called in array order, each passing the value
1496+
through to the next. The last return value is forwarded to the $validators collection.
1497+
Used to sanitize / convert the value.
1498+
Returning undefined from a parser means a parse error occurred. No $validators will
1499+
run and the 'ngModel' will not be updated until the parse error is resolved. The parse error is stored
1500+
in 'ngModel.$error.parse'.
15011501
15021502
*
15031503
* @property {Array.<Function>} $formatters Array of functions to execute, as a pipeline, whenever
1504-
the model value changes. Each function is called, in turn, passing the value through to the
1505-
next. Used to format / convert values for display in the control and validation.
1504+
the model value changes. The functions are called in reverse array order, each passing the value through to the
1505+
next. The last return value is used as the actual DOM value.
1506+
Used to format / convert values for display in the control.
15061507
* ```js
15071508
* function formatter(value) {
15081509
* if (value) {
@@ -1779,12 +1780,13 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
17791780
* @description
17801781
* Change the validity state, and notifies the form.
17811782
*
1782-
* This method can be called within $parsers/$formatters. However, if possible, please use the
1783-
* `ngModel.$validators` pipeline which is designed to call this method automatically.
1783+
* This method can be called within $parsers/$formatters or a custom validation implementation.
1784+
* However, in most cases it should be sufficient to use the `ngModel.$validators` and
1785+
* `ngModel.$asyncValidators` collections which will call `$setValidity` automatically.
17841786
*
1785-
* @param {string} validationErrorKey Name of the validator. the `validationErrorKey` will assign
1786-
* to `$error[validationErrorKey]` and `$pending[validationErrorKey]`
1787-
* so that it is available for data-binding.
1787+
* @param {string} validationErrorKey Name of the validator. The `validationErrorKey` will be assigned
1788+
* to either `$error[validationErrorKey]` or `$pending[validationErrorKey]`
1789+
* (for unfulfilled `$asyncValidators`), so that it is available for data-binding.
17881790
* The `validationErrorKey` should be in camelCase and will get converted into dash-case
17891791
* for class name. Example: `myError` will result in `ng-valid-my-error` and `ng-invalid-my-error`
17901792
* class and can be bound to as `{{someForm.someControl.$error.myError}}` .

0 commit comments

Comments
 (0)