angular.inputType

Angular 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:

Example

   <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>
  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');
  });