HTML input element widget with angular data-binding. Input widget follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.
The custom angular.inputType
s provide a shorthand for declaring new
inputs. This is a sharthand for text-box based inputs, and there is no need to go through the
full $formFactory
widget lifecycle.
<input type="..." ng:model="..." [name="..."] [required] [ng:minlength="..."] [ng:maxlength="..."] [ng:pattern="..."] [ng:change="..."]></input>
type – {string} –
Widget types as defined by angular.inputType
. If the
type is in the format of @ScopeType
then ScopeType
is loaded from the
current scope, allowing quick definition of type.
ng:model – {string} –
Assignable angular expression to data-bind to.
name(optional) – {string} –
Property name of the form under which the widgets is published.
required(optional) – {string} –
Sets REQUIRED
validation error key if the value is not entered.
ng:minlength(optional) – {number} –
Sets MINLENGTH
validation error key if the value is shorter than
minlength.
ng:maxlength(optional) – {number} –
Sets MAXLENGTH
validation error key if the value is longer than
maxlength.
ng:pattern(optional) – {string} –
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.
ng:change(optional) – {string} –
Angular expression to be executed when input changes due to user interaction with the input element.
<script> function Ctrl() { this.user = {name: 'guest', last: 'visitor'}; } </script> <div ng:controller="Ctrl"> <form name="myForm"> User name: <input type="text" name="userName" ng:model="user.name" required> <span class="error" ng:show="myForm.userName.$error.REQUIRED"> Required!</span><br> Last name: <input type="text" name="lastName" ng:model="user.last" ng:minlength="3" ng:maxlength="10"> <span class="error" ng:show="myForm.lastName.$error.MINLENGTH"> Too short!</span> <span class="error" ng:show="myForm.lastName.$error.MAXLENGTH"> Too long!</span><br> </form> <hr> <tt>user = {{user}}</tt><br/> <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br> <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br> <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br> <tt>myForm.userName.$error = {{myForm.lastName.$error}}</tt><br> <tt>myForm.$valid = {{myForm.$valid}}</tt><br> <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br> <tt>myForm.$error.MINLENGTH = {{!!myForm.$error.MINLENGTH}}</tt><br> <tt>myForm.$error.MAXLENGTH = {{!!myForm.$error.MAXLENGTH}}</tt><br> </div>
it('should initialize to model', function() { expect(binding('user')).toEqual('{\n \"last\":\"visitor",\n \"name\":\"guest\"}'); expect(binding('myForm.userName.$valid')).toEqual('true'); expect(binding('myForm.$valid')).toEqual('true'); }); it('should be invalid if empty when required', function() { input('user.name').enter(''); expect(binding('user')).toEqual('{\n \"last\":\"visitor",\n \"name\":\"\"}'); expect(binding('myForm.userName.$valid')).toEqual('false'); expect(binding('myForm.$valid')).toEqual('false'); }); it('should be valid if empty when min length is set', function() { input('user.last').enter(''); expect(binding('user')).toEqual('{\n \"last\":\"",\n \"name\":\"guest\"}'); expect(binding('myForm.lastName.$valid')).toEqual('true'); expect(binding('myForm.$valid')).toEqual('true'); }); it('should be invalid if less than required min length', function() { input('user.last').enter('xx'); expect(binding('user')).toEqual('{\n \"last\":\"xx",\n \"name\":\"guest\"}'); expect(binding('myForm.lastName.$valid')).toEqual('false'); expect(binding('myForm.lastName.$error')).toMatch(/MINLENGTH/); expect(binding('myForm.$valid')).toEqual('false'); }); it('should be valid if longer than max length', function() { input('user.last').enter('some ridiculously long name'); expect(binding('user')) .toEqual('{\n \"last\":\"some ridiculously long name",\n \"name\":\"guest\"}'); expect(binding('myForm.lastName.$valid')).toEqual('false'); expect(binding('myForm.lastName.$error')).toMatch(/MAXLENGTH/); expect(binding('myForm.$valid')).toEqual('false'); });