Avoid unsaved changes pop up after form submission - AngularJS

Question

When I submit my login form and redirect to another page after successful authentication, I get a pop up saying that I have unsaved changes. I believe this pop up should only show if you redirect to another page without saving your changes to a form.

I have tried calling the the $setPrestine() and $setUntouched() functions of the form and setting the model to null but the pop up still shows.

How do I properly handle this? Thanks

UPDATE

I found out that the issue is caused by an angular module (angular-agility) that is used in the project I'm working on. I have found the solution after doing a lot of tracing.

What do you mean saving your changes to a form. You mean updating the database i.e. backend!! right?? — manish kumar, Feb 16 '17 at 08:32
I am not actually saving anything here since I am just doing authentication then redirect to my home page if the authentication is successful. However, a pop up asking me whether I really want to navigate a coz I have unsaved changes pops up when I try to redirect to my home page. — Rian, Feb 16 '17 at 08:36
@manishkumar I mean saving the changes that you have made in the form. — Rian, Feb 16 '17 at 08:37
How is the re-direct happening? Is it a POST 303 redirect? Or is it a change using the $location service? — georgeawg, Feb 16 '17 at 18:31

score 1 · Answer 1 · edited May 23 '17 at 10:29

You have various classes

ng-pristine,ng-dirty which gets applied on the input if you do the actions on them

You can learn that and use accordingly. read this

<script>
  angular.module('formExample', [])
    .controller('FormController', ['$scope', function($scope) {
      $scope.userType = 'guest';
    }]);
</script>
<style>
 .my-form {
   transition:all linear 0.5s;
   background: transparent;
 }
 .my-form.ng-invalid {
   background: red;
 }
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <code>userType = {{userType}}</code><br>
  <code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
  <code>myForm.input.$error = {{myForm.input.$error}}</code><br>
  <code>myForm.$valid = {{myForm.$valid}}</code><br>
  <code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
 </form>

Now you can see there are various method to do so.
Have a good look and apply. Happy Coding!!

Alternatively You can refer this answer

Sorry, I found out that this issue is caused by an angular module (angular-agility) that is used in my project. I have found the solution after doing a lot of tracing. Thanks for your time anyway :) — Rian, Feb 20 '17 at 05:53
You can post the answer . Atleast other who has the same issue might find it useful. — manish kumar, Feb 20 '17 at 06:24

Avoid unsaved changes pop up after form submission - AngularJS

1 Answers1