Standard HTML text input with angular data binding, inherited by most of the input
elements.
<input type="text"
ng-model="string"
[name="string"]
[required="string"]
[ng-required="string"]
[ng-minlength="number"]
[ng-maxlength="number"]
[pattern="string"]
[ng-pattern="string"]
[ng-change="string"]
[ng-trim="boolean"]>
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 |
Adds |
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. |
ngTrim
(optional)
|
boolean |
If set to false Angular will not automatically trim the input. This parameter is ignored for input[type=password] controls, which will never trim the input. (default: true) |
<script>
angular.module('textInputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.example = {
text: 'guest',
word: /^\s*\w*\s*$/
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>Single word:
<input type="text" name="input" ng-model="example.text"
ng-pattern="example.word" required ng-trim="false">
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.pattern">
Single word only!</span>
</div>
<tt>text = {{example.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/>
</form>