<!DOCTYPE html>
<html>
<head>
<title>Wikitechy AngularJS Tutorials</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
<h3>AngularJS HTML Form Validation </h3>
<form ng-app="myApp" ng-controller="inputCtrl" name="myform">
Enter Mobile Number :
<input type="text" name="number" ng-model="number" required ng-minlength="10" ng-maxlength="13" ng-pattern="/^[0-9]+$/" ng-change="changefun()" required>
<span style="color:red" ng-show="myform.number.$dirty && myform.number.$invalid">
<span ng-show="myform.number.$error.required">Number is required.</span>
<span ng-show="myform.number.$error.pattern">Pattern does not match</span>
<span ng-show="myform.number.$error.minlength">Minimum length 10 char</span>
<span ng-show="myform.number.$error.maxlength">Maximum length 13 char</span>
</span>
<p ng-show="myform.number.$valid">Valid Number</p>
<p>{{mychange}}</p>
<input type="submit" value="Submit" ng-click="submit()" />
</form>
<script>
var app = angular.module("myApp", []);
app.controller("inputCtrl", function($scope) {
$scope.changefun = function() {
$scope.mychange="text changed";
};
});
</script>
</body>
</html>
