Text input with URL validation. Sets the url
validation error key if the content is not a
valid URL.
input[url]
uses a regex to validate urls that is derived from the regex
used in Chromium. If you need stricter validation, you can use ng-pattern
or modify
the built-in validators (see the Forms guide)
<input type="url"
ng-model="string"
[name="string"]
[required="string"]
[ng-required="string"]
[ng-minlength="number"]
[ng-maxlength="number"]
[pattern="string"]
[ng-pattern="string"]
[ng-change="string"]>
Param | Type | Details |
---|---|---|
ngModel | string |
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 |
ngRequired
(optional)
|
string |
Adds |
ngMinlength
(optional)
|
number |
Sets |
ngMaxlength
(optional)
|
number |
Sets |
pattern
(optional)
|
string |
Similar to |
ngPattern
(optional)
|
string |
Sets |
ngChange
(optional)
|
string |
Angular expression to be executed when input changes due to user interaction with the input element. |
<script>
angular.module('urlExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.url = {
text: 'http://google.com'
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>URL:
<input type="url" name="input" ng-model="url.text" required>
<label>
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.url">
Not valid url!</span>
</div>
<tt>text = {{url.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>