diff options
Diffstat (limited to 'docs/content/guide/dev_guide.forms.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.forms.ngdoc | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index 0c3a7fc3..334c590d 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/docs/content/guide/dev_guide.forms.ngdoc @@ -12,9 +12,9 @@ Server-side validation is still necessary for a secure application. # Simple form -The key directive in understanding two-way data-binding is {@link api/angular.module.ng.$compileProvider.directive.ng-model ng-model}. -The `ng-model` provides the two-way data-binding by synchronizing the model to the view, as well as view to the model. -In addition it provides {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController API} for other directives to augment its behavior. +The key directive in understanding two-way data-binding is {@link api/angular.module.ng.$compileProvider.directive.ngModel ngModel}. +The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model. +In addition it provides {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController API} for other directives to augment its behavior. <doc:example> <doc:source> @@ -56,7 +56,7 @@ Note that `novalidate` is used to disable browser's native form validation. # Using CSS classes -To allow styling of form as well as controls, `ng-model` add these CSS classes: +To allow styling of form as well as controls, `ngModel` add these CSS classes: - `ng-valid` - `ng-invalid` @@ -115,7 +115,7 @@ This ensures that the user is not distracted with an error until after interacti A form is in instance of {@link api/angular.module.ng.$compileProvider.directive.form.FormController FormController}. The form instance can optionally be published into the scope using the `name` attribute. -Similarly control is an instance of {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController NgModelController}. +Similarly control is an instance of {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController NgModelController}. The control instance can similarly be published into the form instance using the `name` attribute. This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives. @@ -181,16 +181,16 @@ This allows us to extend the above example with these features: Angular provides basic implementation for most common html5 {@link api/angular.module.ng.$compileProvider.directive.input input} types: ({@link api/angular.module.ng.$compileProvider.directive.input.text text}, {@link api/angular.module.ng.$compileProvider.directive.input.number number}, {@link api/angular.module.ng.$compileProvider.directive.input.url url}, {@link api/angular.module.ng.$compileProvider.directive.input.email email}, {@link api/angular.module.ng.$compileProvider.directive.input.radio radio}, {@link api/angular.module.ng.$compileProvider.directive.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 `ng-model` {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController controller}. +Defining your own validator can be done by defining your own directive which adds a custom validation function to the `ngModel` {@link api/angular.module.ng.$compileProvider.directive.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: * **Model to View update** - - Whenever the bound model changes, all functions in {@link api/angular.module.ng.$compileProvider.directive.ng-model.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 api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setValidity NgModelController#$setValidity}. + Whenever the bound model changes, all functions in {@link api/angular.module.ng.$compileProvider.directive.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 api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setValidity NgModelController#$setValidity}. * **View to Model update** - - In a similar way, whenever a user interacts with a control, the controll calls {@link api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setViewValue NgModelController#$setViewValue}. -This in turn pipelines all functions in {@link api/angular.module.ng.$compileProvider.directive.ng-model.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 api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setValidity NgModelController#$setValidity}. + In a similar way, whenever a user interacts with a control, the controll calls {@link api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setViewValue NgModelController#$setViewValue}. +This in turn pipelines all functions in {@link api/angular.module.ng.$compileProvider.directive.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 api/angular.module.ng.$compileProvider.directive.ngModel.NgModelController#$setValidity NgModelController#$setValidity}. In the following example we create two directives. @@ -272,13 +272,13 @@ In the following example we create two directives. </doc:example> -# Implementing custom form control (using ng-model) +# Implementing custom form control (using `ngModel`) Angular implements all of the basic HTML form controls ({@link api/angular.module.ng.$compileProvider.directive.input input}, {@link api/angular.module.ng.$compileProvider.directive.select select}, {@link api/angular.module.ng.$compileProvider.directive.textarea textarea}), which should be sufficient for most cases. However, if you need more flexibility, you can write your own form control as a directive. -In order for custom control to work with `ng-model` and to achieve two-way data-binding it needs to: +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 api/angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$formatters NgModelController#$formatters}, + - implement `render` method, which is responsible for rendering the data after it passed the {@link api/angular.module.ng.$compileProvider.directive.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 api/angular.module.ng.$compileProvider.directive $compileProvider.directive} for more info. |