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