You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/guide/forms.ngdoc
+13-9Lines changed: 13 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -268,19 +268,23 @@ This example shows how to debounce model changes. Model will be updated only 250
268
268
269
269
# Custom Validation
270
270
271
-
Angular provides basic implementation for most common html5 {@link ng.directive:input input}
271
+
Angular provides basic implementation for most common HTML5 {@link ng.directive:input input}
272
272
types: ({@link input[text] text}, {@link input[number] number}, {@link input[url] url}, {@link input[email] email}, {@link input[radio] radio}, {@link input[checkbox] checkbox}), as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`, `min`, `max`).
273
273
274
-
Defining your own validator can be done by defining your own directive which adds a custom validation function to the `ngModel` {@link ngModel.NgModelController controller}.
275
-
To get a hold of the controller the directive specifies a dependency as shown in the example below.
276
-
The validation can occur in two places:
274
+
You can define your own validator by defining a directive which adds a validation function to the `ngModel` {@link ngModel.NgModelController controller}.
275
+
The directive can get ahold of `ngModel` by specifying `require: 'ngModel'` in the directive definition.
276
+
See below for an example.
277
+
278
+
Validation runs in two places:
277
279
278
280
* **Model to View update** -
279
-
Whenever the bound model changes, all functions in {@link ngModel.NgModelController#$formatters NgModelController#$formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
281
+
The functions in {@link ngModel.NgModelController#$formatters `NgModelController.$formatters`} are pipelined.
282
+
Whenever the bound model changes, each of these functions has an opportunity to format the value and change validity state of the form control through {@link ngModel.NgModelController#$setValidity `NgModelController.$setValidity`}.
280
283
281
284
* **View to Model update** -
282
-
In a similar way, whenever a user interacts with a control it calls {@link ngModel.NgModelController#$setViewValue NgModelController#$setViewValue}.
283
-
This in turn pipelines all functions in the {@link ngModel.NgModelController#$parsers NgModelController#$parsers} array, so that each of these functions has an opportunity to convert the value and change validity state of the form control through {@link ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
285
+
In a similar way, whenever a user interacts with a control it calls {@link ngModel.NgModelController#$setViewValue `NgModelController.$setViewValue`}.
286
+
287
+
This in turn runs all functions in the {@link ngModel.NgModelController#$parsers `NgModelController.$parsers`} array as a pipeline. Each function in `$parsers` has an opportunity to convert the value and change validity state of the form control through {@link ngModel.NgModelController#$setValidity `NgModelController.$setValidity`}.
284
288
285
289
In the following example we create two directives.
286
290
@@ -366,10 +370,10 @@ However, if you need more flexibility, you can write your own form control as a
366
370
367
371
In order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to:
368
372
369
-
- implement `$render` method, which is responsible for rendering the data after it passed the {@link ngModel.NgModelController#$formatters NgModelController#$formatters},
373
+
- implement `$render` method, which is responsible for rendering the data after it passed the {@link ngModel.NgModelController#$formatters `NgModelController.$formatters`},
370
374
- call `$setViewValue` method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener.
371
375
372
-
See {@link guide/directive $compileProvider.directive} for more info.
376
+
See {@link guide/directive `$compileProvider.directive`} for more info.
373
377
374
378
The following example shows how to add two-way data-binding to contentEditable elements.
0 commit comments