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?
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
$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?
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();
});
}
}
}]);i looked 3 times through your code cannot finde where you use $pristine or $setPristine()
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();
});
}
}
}]);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
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