diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc index 0d719a2e..35299f35 100644 --- a/docs/content/guide/forms.ngdoc +++ b/docs/content/guide/forms.ngdoc @@ -268,19 +268,23 @@ This example shows how to debounce model changes. Model will be updated only 250 # Custom Validation -Angular provides basic implementation for most common html5 {@link ng.directive:input input} +Angular provides basic implementation for most common HTML5 {@link ng.directive:input input} 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`). -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}. -To get a hold of the controller the directive specifies a dependency as shown in the example below. -The validation can occur in two places: +You can define your own validator by defining a directive which adds a validation function to the `ngModel` {@link ngModel.NgModelController controller}. +The directive can get ahold of `ngModel` by specifying `require: 'ngModel'` in the directive definition. +See below for an example. + +Validation runs in two places: * **Model to View update** - - 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}. + The functions in {@link ngModel.NgModelController#$formatters `NgModelController.$formatters`} are pipelined. + 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`}. * **View to Model update** - - In a similar way, whenever a user interacts with a control it calls {@link ngModel.NgModelController#$setViewValue NgModelController#$setViewValue}. -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}. + In a similar way, whenever a user interacts with a control it calls {@link ngModel.NgModelController#$setViewValue `NgModelController.$setViewValue`}. + +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`}. In the following example we create two directives. @@ -366,10 +370,10 @@ However, if you need more flexibility, you can write your own form control as a In order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to: - - implement `$render` method, which is responsible for rendering the data after it passed the {@link ngModel.NgModelController#$formatters NgModelController#$formatters}, + - implement `$render` method, which is responsible for rendering the data after it passed the {@link ngModel.NgModelController#$formatters `NgModelController.$formatters`}, - 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. -See {@link guide/directive $compileProvider.directive} for more info. +See {@link guide/directive `$compileProvider.directive`} for more info. The following example shows how to add two-way data-binding to contentEditable elements.