The ng-required is use to validate required fields with the help of
The example in detail as given below The AngularJs code sample
The HTML code sample
The Full live example code
The output:
pwd: {
required: true
}
The example in detail as given below The AngularJs code sample
var app = angular.module("pwdApp", []); app.controller('pwdCtrl', function ($scope) { $scope.password = { pwd: { required: true, minlength: 6, maxlength: 15 } } });
The HTML code sample
<div ng-app="pwdApp" ng-controller="pwdCtrl"> <div> <h3>Use of ng-minlength and ng-maxlength in AngularJs</h3> </div> <form name="myForm"> Password * <input type="password" name="myPassword" ng-model="myPassword" ng-minlength='{{password.pwd.minlength}}' ng-maxlength="{{password.pwd.maxlength}}" ng-required='password.pwd.required' /> <span ng-show="myForm.myPassword.$dirty && myForm.myPassword.$error.required">Password is required!</span> <span ng-show="myForm.myPassword.$error.minlength">Input is too short!</span> <span ng-show="myForm.myPassword.$error.maxlength">Input is too long!</span> </form> </div>
The Full live example code
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script> var app = angular.module("pwdApp", []); app.controller('pwdCtrl', function ($scope) { $scope.password = { pwd: { required: true, minlength: 6, maxlength: 15 } } }); </script> </head> <body ng-app="pwdApp" ng-controller="pwdCtrl"> <div> <h3>Use of ng-minlength and ng-maxlength in AngularJs</h3> </div> <form name="myForm"> Password * <input type="password" name="myPassword" ng-model="myPassword" ng-minlength='{{password.pwd.minlength}}' ng-maxlength="{{password.pwd.maxlength}}" ng-required='password.pwd.required' /> <span ng-show="myForm.myPassword.$dirty && myForm.myPassword.$error.required">Password is required!</span> <span ng-show="myForm.myPassword.$error.minlength">Input is too short!</span> <span ng-show="myForm.myPassword.$error.maxlength">Input is too long!</span> </form> </body> </html>
The output:
Blogger Comment
Facebook Comment