forked from angular/angular.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
104 changed files
with
7,051 additions
and
3,970 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.