Setting default string got ng-model to blank

Question

I have a user login and registration form. The default values that are currently showing I think are what my browser has cached. I am trying to figure out how to get rid of it programmatically so my input boxes are empty. When I refresh the page I get the image below. I have tried setting the $scope values for the boxes to empty strings, but this does not work when the page is refreshed.

What should I do so the input boxes are blank.

Here is my HTML code

<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>

Here is my js 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 tried ng-init="user=''" in my input tag for user. That also did not work

Possible duplicate of [Is there a W3C valid way to disable autocomplete in a HTML form?](http://stackoverflow.com/questions/582244/is-there-a-w3c-valid-way-to-disable-autocomplete-in-a-html-form) — nikjohn, Sep 09 '16 at 15:24
@Flint server side I am using express(node). This is all in the Mean stack — Aaron, Sep 09 '16 at 15:26

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Browser vendors fight with developers, so we haven't good enough solution to prevent autofill. They said that user should disable autofill for site in browser settings;

Disabling Chrome Autofill

One possible approach, which were tested some time ago - create directive prevent-autofill, which will change input type at link time and reset it back on keyDown

edited May 23 '17 at 11:51

Community

1
1

answered Sep 09 '16 at 15:36

Valery Kozlov

1,557
2
11
19

nikjohn · Answer 2 · 2016-09-09T15:22:18.937

0

Have you tried ng-init="user=''"

If that doesn't work try this:

<input ng-model="password" type="password" name="password" ng-minlength="4" required autocomplete="nope">

This is of course disabling browser autocompletion. More details can be found here

edited Sep 09 '16 at 15:22

answered Sep 09 '16 at 15:19

nikjohn

20,026
14
50
86

Added another part. Please check above – nikjohn Sep 09 '16 at 15:22

score 0 · Answer 3 · answered Sep 09 '16 at 15:29

Setting autocomplete="off" here has two effects:

it stops the browser saving field data for later autocompletion on similar forms though heuristics that vary by browser.

it stops the browser caching form data in session history. When form data is cached in session history, the information the user has filled in will be visible after the user has submitted the form and clicked on the Back button to go back to the original form page.

Setting default string got ng-model to blank

3 Answers3