I am currently working on a user login and registration form where I noticed that the default values appearing are most likely cached by my browser. I am exploring ways to clear these values programmatically so that the input boxes are empty. Despite attempting to set the $scope values to empty strings, the issue persists even when I refresh the page. The image below illustrates the problem after a page refresh: https://i.sstatic.net/MZHuZ.png
How can I ensure that the input boxes are blank?
Below is the HTML code snippet:
<div class="root" ng-controller="userController">
<div class=user>
<form name="login_form" >
<h2 class>Login</h2>
<h3 class = "login_page">UserName</h3>
<input ng-model="user" type="text" ng-minlength="1" required>
<h3 class = "login_page">Password</h3>
<input ng-model="password" type="password" name="password" ng-minlength="4" required>
<input type="submit" value="Login" ng-click="login()" >
<div ng-if ="login_form.$submitted" ng-messages="login_form.password.$error" style="color:maroon" role="alert">
<div ng-message="minlength">Your field is too short</div>
</div>
<p ng-if="error">Username or login is incorrect</p>
</form>
</div>
<div class=user>
<form name = "register_form">
<h2 class>Register</h2>
<h3 class = "login_page">UserName</h3>
<input ng-model="reg.name" type="text" required>
<h3 class = "login_page">Password</h3>
<input ng-model="reg.password" type="password">
<input type="submit" value="Register" ng-click="register()" required >
<p ng-if="small">Password must be at least 5 chars long</p>
<p ng-if="duplicate">That user name is taken, please choose another</p>
<p ng-if="correct">Registration Succesfull</p>
</form>
</div>
</div>
And here is the corresponding JavaScript controller code:
app.controller('userController', ['$scope', '$location', 'userFactory', function($scope, $location, userFactory){
index = function(){
userFactory.set_name(function(returned_data){
$scope.reg = {name:''};
erase();
})
}
index();
$scope.login = function(){
userFactory.login($scope.user, $scope.password, function(sendUser){
if(!sendUser.data.error){
$location.url('/logged_in');
}else {
$scope.error = true;
erase();
}
})
}
$scope.register = function(){
$scope.small = false;
if($scope.reg.password.length < 5){
$scope.small = true;
}else {
userFactory.register($scope.reg.name, $scope.reg.password, function(sendUser){
console.log(sendUser)
$scope.duplicate = false;
$scope.correct = false;
if(sendUser.data.error){
$scope.duplicate = true;
erase();
}else {
$scope.correct = true;
erase();
}
})
}
}
erase = function(){
$scope.reg.name = "";
$scope.reg.password = "";
$scope.user = "";
$scope.password = "";
}
}]);
I have also attempted using ng-init="user=''" in the input tag for the user, however, this approach was also unsuccessful.