Develop an AngularJS program to create a login form, with validation for the username and password fields.
Program:-
<!DOCTYPE html>
<html>
<title>Angular JS Login Form</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app=angular.module("loginApp",[]);
app.controller('loginAppCntrl',function($scope){
$scope.userName=''
$scope.password=''
$scope.noAttempts=0
$scope.login=function(){
// console.log("Inside login function")
if($scope.userName=="harish" &&
$scope.password=="12345678")
{
alert("Login Successfull")
}
else{
$scope.noAttempts++
if($scope.noAttempts<=3)
{
alert("Incorrect user name/password! Attempt No.
"+$scope.noAttempts)
}
else{
document.getElementById("loginButton").disabled=true
}
}
}
});
</script>
<style>
.error-message{
color:red;
font-size: 20px;
}
</style>
</head>
<body ng-app="loginApp" ng-controller="loginAppCntrl">
<h1>Angular JS Login Form</h1>
<form name="loginForm" ng-submit="submitForm()">
Enter the User Name:<input type="text" name="userName"
ng-model="userName" ng-minlength="5" ng-maxlength="8" required placeholder="Enter
User Name">
<span class="error-message"
ng-show="loginForm.userName.$error.required && loginForm.userName.$dirty">User
Name is Required</span>
<span class="error-message"
ng-show="loginForm.userName.$error.minlength">Minimum Length Must be 5</span>
<span class="error-message"
ng-show="loginForm.userName.$error.maxlength">Maximum user name length is limitted
to 8</span>
<br/>
<br/>
Enter the Password: <input type="password" name="password"
ng-model="password" ng-minlength="5" ng-maxlength="8" required placeholder="Enter
your password">
<span class="error-message" ng-show="loginForm.password.$error.required
&& loginForm.password.$dirty">Password is required</span>
<span class="error-message"
ng-show="loginForm.password.$error.minlength">Minimum Password length is 5</span>
<span class="error-message"
ng-show="loginForm.password.$error.maxlength">Maximum password length is limitted
to 8</span>
<br/>
<br/>
<button type="submit" ng-disabled="loginForm.$invalid"
ng-click="login()" id="loginButton">Login</button>
</form>
</body>
</html>