The AngularJS input types are HTML input element control and used togather with ng-model
directive. AngularJS input type Text can be decorate with various AngularJS arguments like name
,ng-required
,ng-minlength
,ng-maxlength
,ng-pattern
,ng-trim
and ng-change
.
Syntax
<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"]>
Here is a list of AngularJS Input Type Text Arguments.
Directives | Description |
---|---|
ng-model | AngularJS expression to bind the text. |
name (optional) | Name of the control input control. |
ng-minlength (optional) | AngularJS expression sets the min validation constraint to the text. |
ng-maxlength (optional) | AngularJS expression sets the max validation constraint to the text. |
ng-pattern (optional) | Validate input type text with given match pattern. |
required (optional) | Validate input type text is required. |
ng-required (optional) | AngularJS expression ng-required expression evaluates to true. |
ng-trim (optional) | AngularJS expression ng-trim expression remove empty space. |
ng-change (optional) | AngularJS expression to be executed when input value changes. |
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <title>AngularJS Input Type Text</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> <script> var app = angular.module('textInputExample', []) app.run(function($rootScope){ $rootScope.angular = angular; }) app.controller('TextController', ['$scope', function($scope) { $scope.example = { text:'W %ithout special character', pattern: /^[a-zA-Z0-9,.# ]*$/ }; }]); </script> </head> <body style="background-color:#DDE4E9;"> <fieldset style="background-color:#DDE4E9;"> <legend>AngulerJS Input Type Text Example</legend> <div ng-app="textInputExample"> <form name="myForm" ng-controller="TextController"> <label for="exampleInput">Enter Sentance</label> <input type="text" name="input" ng-model="example.text" ng-pattern="example.pattern" required> <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-if="myForm.input.$error.pattern">Enter only a-z A-Z 0-9 , . #.</p> </form> </div> </fieldset> </body> </html>
Above example will produce following output
See Live Example