@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 by 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(element, scope) {
       scope.$parseView = function() {
         try {
           this.$modelValue = angular.fromJson(this.$viewValue);
           if (this.$error.JSON) {
             this.$emit('$valid', 'JSON');
           }
         } catch (e) {
             this.$emit('$invalid', 'JSON');
         }
       }

       scope.$parseModel = function() {
         this.$viewValue = angular.toJson(this.$modelValue);
       }
     });

     function Ctrl($scope) {
       $scope.data = {
         framework:'angular',
         codenames:'supper-powers'
       }
       $scope.required = false;
       $scope.disabled = false;
       $scope.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('{}');
    input('data').enter('{');
    expect(element('form[name=myForm]').prop('className')).toMatch('ng-invalid');
  });
</doc:scenario>
</doc:example>
