diff options
| author | Misko Hevery | 2011-09-08 13:56:29 -0700 | 
|---|---|---|
| committer | Igor Minar | 2011-10-11 11:01:45 -0700 | 
| commit | 4f78fd692c0ec51241476e6be9a4df06cd62fdd6 (patch) | |
| tree | 91f70bb89b9c095126fbc093f51cedbac5cb0c78 /docs/content/api | |
| parent | df6d2ba3266de405ad6c2f270f24569355706e76 (diff) | |
| download | angular.js-4f78fd692c0ec51241476e6be9a4df06cd62fdd6.tar.bz2 | |
feat(forms): new and improved forms
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  | 
