AngularJS form example
form is a directive in module ng of angularjs to for detail about definition of please refer direct AngularJs doc for this to know more. In this post i just want to make a example to help you learn easy.This sample will guild you know how to build a form in angularjs. Following directives will be used in this sample.
- ng-controller
- ng-submit
- ng-pattern
- ng-model
- ng-trim
- ng-minlength
- ng-maxlength
- required
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to build sample form in angularjs</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<style>
.ng-invalid {
color: red;
}
td {
padding-right: 30px;
}
</style>
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.login = function () {
if ($scope.username == 'admin' && $scope.password == '123456') {
alert('Login successfully!');
}
else {
alert('Login failed!');
}
};
}]);
</script>
</head>
<body ng-app="myapp">
<h1>Login form</h1>
<form ng-controller="ExampleController" name="myForm" ng-submit="login()">
User name: <br />
<input type="text" name="userName" ng-pattern="/^([a-zA-Z0-9]+)$/" ng-model="username" ng-trim="true" required ng-minlength="3" ng-maxlength="10" /> <br />
Password: <br />
<input type="text" name="userPass" ng-model="password" required ng-minlength="3" ng-maxlength="10" ng-trim="true"> <br /><br />
<input type="submit" value='Login' />
</form>
</body>
</html> Thanks for your time reading.
No comments:
Post a Comment