Accessing $setPristine on form


#1

I found a few other topics on this issue but nothing seems to be solving it. In short i’m trying to access my form and use the .$setPristine method to reset it once everything has been done correctly.

Has anyone been able to get this working?


#2

Say you have this form, with inputs and whatnot in your Angular templates.

<form name="myForm">
...
</form>

Then in your controller for that, you should be able to do this.

$scope.myForm.setPristine();

Form controllers are automatically added to the scope based on the name value, and have the methods listed here. https://docs.angularjs.org/api/ng/type/form.FormController


#3

$scope.myForm.$setPristine(); here is an example http://jsfiddle.net/jupiter/7jwZR/1/ . This is a angular question or maybe i am wrong and there is a special issue with ionic?


#4

I dont’ seem to be getting a reference to it, here is my code

html

<!--View Content -->
<ion-content padding="true" has-header="true" scroll="true">

    <div id="login-image" >
        <img src="img/Final-Logo.png" />
    </div>

    <form name="signInForm" novalidate="" ng-submit="authenticate(signInForm)">

        <div class="form-errors" ng-show="signInForm.username.$error && signInForm.$submitted"
             ng-messages="signInForm.username.$error">
            <div class="form-error-all" padding-horizontal ng-message="nouser">The username or password is incorrect.</div>
        </div>

        <!-- Username -->
        <label id="username" class="item item-input username"
               ng-class="{ 'bad-input' : signInForm.username.$invalid && signInForm.$submitted}">
            <input type="text"
                   placeholder="Username"
                   ng-model="user.username"
                   name="username"
                   required>
        </label>

        <!-- FORM ERRORS -->
        <div class="form-errors" ng-show="signInForm.username.$error && signInForm.$submitted"
             ng-messages="signInForm.username.$error"
             ng-messages-include="templates/formErrors.html">
        </div>

        <!-- Password -->
        <label id="password" class="item item-input lock"
               ng-class="{ 'bad-input' : signInForm.password.$invalid && signInForm.$submitted}">
            <input type="password"
                   placeholder="Password"
                   ng-model="user.password"
                   name="password"
                   required>
        </label>

        <!-- FORM ERRORS -->
        <div class="form-errors" ng-show="signInForm.password.$error && signInForm.$submitted"
             ng-messages="signInForm.password.$error"
             ng-messages-include="templates/formErrors.html">
        </div>

        <div class="padding-bottom">
            <button class="button button-block button-energized" ng-click="authenticate(user)">
                <i class="icon ion-log-in"></i>
                Log In
            </button>
        </div>
    </form>
    <div class="button-bar">
        <a class="button button-outline button-light" nav-direction="back" ui-sref="password">Lost Password?</a>
        <a class="button button-outline button-light" ui-sref="register">Register</a>
    </div>

</ion-content>

js

angular.module('va_disability.login', ['ionic'] )

.controller('LoginCtrl',['$scope', '$state', '$resource', 'userInfo', '$ionicLoading', 'ecfrService', function LoginCtrl($scope, $state, $resource, userInfo, $ionicLoading, ecfrService){
        $scope.user = {};
        ecfrService.getEcfr();
        $scope.authenticate = function(form){
            console.log($scope);
            if(form.$name === "signInForm") {
                form.username.$setValidity("nouser", true);
                form.password.$setValidity("nouser", true);
            }
            if(form.$valid) {
                $ionicLoading.show({
                    template: 'Loading...'
                });

                var signIn = $resource('https://fmserver.herokuapp.com/users/sign_in',
                    {},
                    {
                        login: {
                            method: 'POST',
                            params: {
                                username: form.username.$modelValue.toLowerCase(),
                                password: form.password.$modelValue
                            }
                        }
                    });

                signIn.login(
                    function (success) {
                        userInfo.token = success.token;

                        $ionicLoading.hide();

                        //save user data (Is there a way to jsut make this a function to call within? or A global function?)
                        $resource('https://fmserver.herokuapp.com/users/me').get({token: userInfo.token}).$promise.then(function (user) {
                            console.log(user);
                            userInfo.username = user.username;
                            userInfo.email = user.email;
                            userInfo.first_name = user.first_name;
                            userInfo.last_name = user.last_name;
                            userInfo.service_year = user.service_year;
                            userInfo.disabilities = user.disabilities;
                            userInfo.address = user.address;
                            userInfo.city = user.city;
                            userInfo.state = user.state;
                            userInfo.zipcode = user.zipcode;
                            userInfo.service_branch = user.service_branch;
                            userInfo.membership = user.membership;
                            userInfo.is_admin = user.is_admin;
                        });

                        for(user in $scope.user){
                            $scope.user[user] = "";
                        }
                        $state.go('vanav.main');

                    },
                    function (failure) {
                        form.username.$setValidity("nouser", false);
                        form.password.$setValidity("nouser", false);
                        $ionicLoading.hide();
                    });
            }
        }

}]);

#5

i looked 3 times through your code cannot finde where you use $pristine or $setPristine()


#6

I took it out because it was throwing an error everytime, but it was placed here.

    angular.module('va_disability.login', ['ionic'] )

.controller('LoginCtrl',['$scope', '$state', '$resource', 'userInfo', '$ionicLoading', 'ecfrService', function LoginCtrl($scope, $state, $resource, userInfo, $ionicLoading, ecfrService){
        $scope.user = {};
        ecfrService.getEcfr();
        $scope.authenticate = function(form){
            console.log($scope);
            if(form.$name === "signInForm") {
                form.username.$setValidity("nouser", true);
                form.password.$setValidity("nouser", true);
            }
            if(form.$valid) {
                $ionicLoading.show({
                    template: 'Loading...'
                });

                var signIn = $resource('https://fmserver.herokuapp.com/users/sign_in',
                    {},
                    {
                        login: {
                            method: 'POST',
                            params: {
                                username: form.username.$modelValue.toLowerCase(),
                                password: form.password.$modelValue
                            }
                        }
                    });

                signIn.login(
                    function (success) {
                        userInfo.token = success.token;

                        $ionicLoading.hide();

                        //save user data (Is there a way to jsut make this a function to call within? or A global function?)
                        $resource('https://fmserver.herokuapp.com/users/me').get({token: userInfo.token}).$promise.then(function (user) {
                            console.log(user);
                            userInfo.username = user.username;
                            userInfo.email = user.email;
                            userInfo.first_name = user.first_name;
                            userInfo.last_name = user.last_name;
                            userInfo.service_year = user.service_year;
                            userInfo.disabilities = user.disabilities;
                            userInfo.address = user.address;
                            userInfo.city = user.city;
                            userInfo.state = user.state;
                            userInfo.zipcode = user.zipcode;
                            userInfo.service_branch = user.service_branch;
                            userInfo.membership = user.membership;
                            userInfo.is_admin = user.is_admin;
                        });

                        for(user in $scope.user){
                            $scope.user[user] = "";
                        }
                        $state.go('vanav.main');

                        //////////////////////////////////////////////////////////////LOOK HERE///////////////////////////////////////////////////////
                        $scope.signInForm.$setPristine();
                       //////////////////////////////////////////////////////////////LOOK HERE///////////////////////////////////////////////////////

                    },
                    function (failure) {
                        form.username.$setValidity("nouser", false);
                        form.password.$setValidity("nouser", false);
                        $ionicLoading.hide();
                    });
            }
        }

}]);

#7

you call $scope.signInForm.$setPristine(); after $state.go . try to call it before you call $state.go(). $state.go() will call destroy of your controller thats why $setPristine() cause an error


#8

I’m late into this, but the problem is that you are calling $scope.signInForm.$setPristine();
Call form.$setPristine() instead and you will be good to go