angularjs $setPristine get an error: TypeError: $scope.$setPristine is not a function

Question

I'm trying to create a basic login form where the form will reset when the page is been loaded and the form has been submitted.

I'm keep getting the following error:

 TypeError: Cannot read property '$setPristine' of undefined at new <anonymous> 

Here are the files (the html file is an Angularjs template):

javascript

.controller('SigninController' ,['$scope','$firebaseAuth',function($scope,$firebaseAuth){
        $scope.user = {email:"",password:""};
        $scope.loginForm.$setPristine();

        $scope.SignIn = function(){ 

            var ref = new Firebase("https://tipandtrip.firebaseio.com/");
            ref.authWithPassword({
          }, function(error, authData) {
              if (error) {
                console.log("Login Failed!", error);
                $scope.user = {email:"",password:""};
                $scope.loginForm.$setPristine();
            } else {
                console.log("Authenticated successfully with payload:", authData);
                $scope.email = "blass";
                $scope.password = "";
                $scope.loginForm.$setPristine();
            }
        });

        };
    }])

      <div class="container" ng-controller="SigninController" >
        <div class="row">
            <div class="col-xs-12">
               <ul class="breadcrumb">
                   <li><a href="index.html">Home</a></li>
                   <li class="active">Login</li>
               </ul>
            </div>
            <div class="col-xs-12">
               <h3>Login</h3>
               <hr>
            </div>
        </div>
        <div class="row row-content">
            <div class="col-xs-12 col-sm-6 col-sm-offset-3">
                <form class="form-horizontal" name="loginForm" ng-submit="SignIn()"  novalidate>
                    <div class="form-group"  ng-class="{ 'has-error has-feedback' : loginForm.email.$invalid && !loginForm.email.$pristine }">
                        <label for="name" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                        <input type="email" class="form-control" id="emailid" name="email" placeholder="Email" ng-model="user.email" required>
                        </div>
                        <span ng-show="loginForm.email.$invalid && !loginForm.email.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                        <span ng-show="(loginForm.email.$invalid || loginForm.email.$error.required) && !loginForm.email.$pristine" class="help-block">Enter a valid email address.</span>

                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : loginForm.password.$error.required && !loginForm.password.$pristine }">
                        <label for="name" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                          <input type="password" class="form-control" id="password" name="password" placeholder="Enter Your Passowrd" ng-model="user.password" required>
                        </div>
                        <span ng-show="loginForm.password.$error.required && !loginForm.password.$pristine" class="help-block">Your Password is required.</span>
                    </div>
                    <div class="form-group"  ng-class="{ 'has-error' : invalidChannelSelection }">                       
            <div class="checkbox col-sm-5 col-sm-offset-2">
                            <label class="checkbox-inline">
                                <input type="checkbox"
                                ng-model="user.remember">
                                <strong>Remember me?</strong>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary" ng-disabled="loginForm.$invalid">Login</button>
                        </div>
                    </div>
                    <div class=" col-sm-12 alert alert-info text-center" id="dbalert_log"></div>
                </form>
            </div>
             <div class="col-xs-12 col-sm-3">

            </div>
       </div>
        <div class="col-xs-12">
            <h3>Reset Password</h3>
            <hr>
        </div> 
       <div class="row row-content">
            <div class="col-xs-12 col-sm-6 col-sm-offset-3">
                <form class="form" role="form" id="resetpass_form">
                    <div class="form-group">
                        <label for="emailReset" class="col-sm-3 control-label">Email</label>                        <div class="col-sm-9">
                        <input type="email" class="form-control" id="email_reset" name="email_reset" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-primary">Reset Password</button>
                        </div>
                    </div>
                   <div class=" col-sm-12 alert alert-info text-center" id="dbalert_reset"></div>
                </form>
            </div>
             <div class="col-xs-12 col-sm-3">

            </div>
       </div>

    </div>

Thank you.

Answer 1

the problem is your are calling $setPrestine() before the loginForm is actually created.

Try doing this instead

<form class="form-horizontal" name="loginForm" ng-submit="SignIn()" ng-init="initFunc()"  novalidate>

and in your JS code

$scope.initFunc = function(){
   $scope.user = {email:"",password:""};
   $scope.loginForm.$setPristine();
}

check this jsFiddle