If someone has created a basic login page with username and password fields using angular and type script please do share.
I have created this html file
<!DOCTYPE html>
<html lang="en" ng-app="loginModule">
<head>
<meta charset="utf-8">
<title>NADA Sign In</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/signin.css" rel="stylesheet">
</head>
<body>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/login.js"></script>
<div class="container" ng-controller="LoginController">
<form class="form-signin" ng-sumbit="login()">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" class="form-control" ng-model="username" placeholder="Username" required
autofocus>
<label for="password" class="sr-only">Password</label>
<input type="password" id="password" class="form-control" ng-model="password" placeholder="Password" required>
<!--<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>-->
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body>
</html>
module login {
export interface IAppCtrl extends ng.IScope{
name : string;
password : string;
}
export class LoginController {
constructor($scope : IAppCtrl) {
scope = $scope;
}
scope.login = function() {
}
}
angular.module('loginModule', []).controller('LoginController', LoginController);
}
How can I access the username and password variables and the login method on the submission of the form?
How do I access the input box values in ng-model for username and password?
module LoginModule {
export class LoginController {
name: string;
password: string;
constructor() {}
login() {
console.log(`Login was clicked, username is ${this.name} and password is ${this.password}`)
}
}
}
angular.module('loginModule', []).controller('LoginController', LoginModule.LoginController);
<!DOCTYPE html>
<html lang="en" ng-app="loginModule">
<head>
<meta charset="utf-8">
<title>NADA Sign In</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/signin.css" rel="stylesheet">
</head>
<body>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/login.js"></script>
<div class="container" ng-controller="LoginController as vm">
<form class="form-signin" ng-sumbit="vm.login()">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" class="form-control" ng-model="vm.username" placeholder="Username" required autofocus>
<label for="password" class="sr-only">Password</label>
<input type="password" id="password" class="form-control" ng-model="vm.password" placeholder="Password" required>
<!--<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>-->
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body>
</html>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments