Kalaiyarasi M Kalaiyarasi M - 4 months ago 48
AngularJS Question

How to clear password field when wrong username or password is used - angularjs

When I try to login with invalid username and password then it will show message as "Invalid username or password".

But if it invalid username or password then password field as to get reset.

Can anyone please help me how to do it?

My controller :

function login() {
vm.dataLoading = true;
var baseUrl = $location.$$absUrl.split('#')[0];
AuthenticationService.Login(vm.username, vm.password, baseUrl, function (response) {
console.log(response);
if( response.success !== undefined ){
FlashService.Error(response.message, true);
} else {
if (response.json.response.statuscode == 0) {
AuthenticationService.SetCredentials(vm.username, vm.password, response.json.response.candidateid, response.json.response.profilestatus);
//( response.json.response.profilestatus < 15 ) ? $location.path('/otp') : $location.path('/');

$location.path('/')
} else {
FlashService.Error(response.json.response.statusmessage);
vm.dataLoading = false;
}
}
});
};


My html :

<div class=" well tab-content">
<div role="tabpanel" class="tab-pane active" id="personal">
<div class="row">
<div class="col-sm-10 col-lg-offset-1">
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$invalid }">
<label for="username">Email</label>
<input type="email" placeholder="Email" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Email required</span>
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Invalid Email Id</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-info">Login</button><a href="#/resetpassword" class="btn btn-link">Forgot Password?</a>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />

<hr>

</div>

Answer

You need to reset the vm.password in the controller because your password input "ng-model" is vm.password

When you get the error, try:

  • To set password empty:

vm.password = "";

  • To set password undefined:

vm.password = undefined;

  • To delete the property password:

delete vm.password;

Comments