Angularjs Examples

AJS Examples


AngularJS Input Type Text

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"]>

AngularJS Input Type Text Arguments

Here is a list of AngularJS Input Type Text Arguments.

DirectivesDescription
ng-modelAngularJS 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.

AngularJS Input Type Text Example

<!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