0% found this document useful (0 votes)
6 views2 pages

AngularJS Login Form with Validation

Uploaded by

atul.rathore
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views2 pages

AngularJS Login Form with Validation

Uploaded by

atul.rathore
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Program 8: Develop AngularJS program to create a login form, with validation for the

username and password fields.


<!DOCTYPE html>
<html>

<head>
<title>Login Form with Validation</title>
<script src="[Link]
</script>
</head>

<body ng-app="myApp">
<div ng-controller="LoginController">
<h2>Login Fom</h2>

<form name=" loginForm" novalidate>


<label>Username:</label>
<input type="text" ng-model="[Link]" name="username" required>
<span ng-show="[Link].$[Link] &&
[Link].$dirty">Username is required.</span>
<br>

<label>Password:</label>
<input type="password" ng-model="[Link]" name="password"
ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/" required>
<span ng-show="[Link].$[Link] &&
[Link].$dirty">Password is required. </span>
<span ng-show="[Link].$[Link] &&
[Link].$dirty">
Password must be alphanumeric and at least 8 characters long.
</span>
<br>

<button ng-click="login()" ng-


disabled="loginForm.$invalid">Login</button>
</form>
<div ng-show="isLoggedIn">
<p>Login successful! Welcome, {{ [Link] }}!</p>
</div>
</div>
<script src="[Link]"> </script>
</body>
</html>
[Link]
var app = [Link]('myApp',[]);
[Link]('LoginController', function ($scope) {
$[Link] = { username:"", password:"" };
$[Link] = false;
$[Link] = function () {
$[Link] = true;
};
});

You might also like