diff options
Diffstat (limited to 'docs/content/api')
| -rw-r--r-- | docs/content/api/angular.inputType.ngdoc | 92 | ||||
| -rw-r--r-- | docs/content/api/angular.service.ngdoc | 2 | ||||
| -rw-r--r-- | docs/content/api/index.ngdoc | 2 |
3 files changed, 92 insertions, 4 deletions
diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc new file mode 100644 index 00000000..434fe6c2 --- /dev/null +++ b/docs/content/api/angular.inputType.ngdoc @@ -0,0 +1,92 @@ +@ngdoc overview +@name angular.inputType +@description + +Angular {@link guide/dev_guide.forms forms} allow you to build complex widgets. However for +simple widget which are based on HTML input text element a simpler way of providing the validation +and parsing is also provided. `angular.inputType` is a short hand for creating a widget which +already has the DOM listeners and `$render` method supplied. The only thing which needs to +be provided by the developer are the optional `$validate` listener and +`$parseModel` or `$parseModel` methods. + +All `inputType` widgets support: + + - CSS classes: + - **`ng-valid`**: when widget is valid. + - **`ng-invalid`**: when widget is invalid. + - **`ng-pristine`**: when widget has not been modified by user action. + - **`ng-dirty`**: when has been modified do to user action. + + - Widget properties: + - **`$valid`**: When widget is valid. + - **`$invalid`**: When widget is invalid. + - **`$pristine`**: When widget has not been modified by user interaction. + - **`$dirty`**: When user has been modified do to user interaction. + - **`$required`**: When the `<input>` element has `required` attribute. This means that the + widget will have `REQUIRED` validation error if empty. + - **`$disabled`**: When the `<input>` element has `disabled` attribute. + - **`$readonly`**: When the `<input>` element has `readonly` attribute. + + - Widget Attribute Validators: + - **`required`**: Sets `REQUIRED` validation error key if the input is empty + - **`ng:pattern`** Sets `PATTERN` validation error key if the value does not match the + RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for + patterns defined as scope expressions. + + + +# Example + +<doc:example> +<doc:source> + <script> + angular.inputType('json', function(){ + this.$parseView = function(){ + try { + this.$modelValue = angular.fromJson(this.$viewValue); + if (this.$error.JSON) { + this.$emit('$valid', 'JSON'); + } + } catch (e) { + this.$emit('$invalid', 'JSON'); + } + } + + this.$parseModel = function(){ + this.$viewValue = angular.toJson(this.$modelValue); + } + }); + + function Ctrl(){ + this.data = { + framework:'angular', + codenames:'supper-powers' + } + this.required = false; + this.disabled = false; + this.readonly = false; + } + </script> + <div ng:controller="Ctrl"> + <form name="myForm"> + <input type="json" ng:model="data" size="80" + ng:required="{{required}}" ng:disabled="{{disabled}}" + ng:readonly="{{readonly}}"/><br/> + Required: <input type="checkbox" ng:model="required"> <br/> + Disabled: <input type="checkbox" ng:model="disabled"> <br/> + Readonly: <input type="checkbox" ng:model="readonly"> <br/> + <pre>data={{data}}</pre> + <pre>myForm={{myForm}}</pre> + </form> + </div> +</doc:source> +<doc:scenario> + it('should invalidate on wrong input', function(){ + expect(element('form[name=myForm]').prop('className')).toMatch('ng-valid'); + input('data').enter('{}'); + expect(binding('data')).toEqual('data={\n }'); + input('data').enter('{'); + expect(element('form[name=myForm]').prop('className')).toMatch('ng-invalid'); + }); +</doc:scenario> +</doc:example> diff --git a/docs/content/api/angular.service.ngdoc b/docs/content/api/angular.service.ngdoc index 874fe4bb..50fe1560 100644 --- a/docs/content/api/angular.service.ngdoc +++ b/docs/content/api/angular.service.ngdoc @@ -14,8 +14,6 @@ session cookies * {@link angular.service.$document $document } - Provides reference to `window.document` element * {@link angular.service.$exceptionHandler $exceptionHandler } - Receives uncaught angular exceptions -* {@link angular.service.$hover $hover } - -* {@link angular.service.$invalidWidgets $invalidWidgets } - Holds references to invalid widgets * {@link angular.service.$location $location } - Parses the browser location URL * {@link angular.service.$log $log } - Provides logging service * {@link angular.service.$resource $resource } - Creates objects for interacting with RESTful diff --git a/docs/content/api/index.ngdoc b/docs/content/api/index.ngdoc index 05928ab4..2ec86346 100644 --- a/docs/content/api/index.ngdoc +++ b/docs/content/api/index.ngdoc @@ -8,8 +8,6 @@ * {@link angular.directive Directives} - Angular DOM element attributes * {@link angular.markup Markup} and {@link angular.attrMarkup Attribute Markup} * {@link angular.filter Filters} - Angular output filters -* {@link angular.formatter Formatters} - Angular converters for form elements -* {@link angular.validator Validators} - Angular input validators * {@link angular.compile angular.compile()} - Template compiler ## Angular Scope API |
