AngularJS: API: ng/directive/input[url]


input[url]

  1. - input in module ng

Text input with URL validation. Sets the url validation error key if the content is not a valid URL.

Directive Info

  • This directive executes at priority level 0.

Usage

<input type="url"
       ng-model=""
       [name=""]
       [required=""]
       [ng-required=""]
       [ng-minlength=""]
       [ng-maxlength=""]
       [ng-pattern=""]
       [ng-change=""]>

Arguments

ParamTypeDetails
ngModelstring

Assignable angular expression to data-bind to.

name
(optional)
string

Property name of the form under which the control is published.

required
(optional)
string

Sets required validation error key if the value is not entered.

ngRequired
(optional)
string

Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.

ngMinlength
(optional)
number

Sets minlength validation error key if the value is shorter than minlength.

ngMaxlength
(optional)
number

Sets maxlength validation error key if the value is longer than maxlength.

ngPattern
(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.

ngChange
(optional)
string

Angular expression to be executed when input changes due to user interaction with the input element.

Example

index.html
<script>
  angular.module('urlExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.text = 'http://google.com';
    }]);</script><form name="myForm" ng-controller="ExampleController">
  URL: <input type="url" name="input" ng-model="text" required>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.url">
    Not valid url!</span>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
 </form>
protractor.js
var text = element(by.binding('text'));var valid = element(by.binding('myForm.input.$valid'));var input = element(by.model('text'));

it('should initialize to model', function() {
  expect(text.getText()).toContain('http://google.com');
  expect(valid.getText()).toContain('true');});

it('should be invalid if empty', function() {
  input.clear();
  input.sendKeys('');

  expect(text.getText()).toEqual('text =');
  expect(valid.getText()).toContain('false');});

it('should be invalid if not url', function() {
  input.clear();
  input.sendKeys('box');

  expect(valid.getText()).toContain('false');});