Save form before state change with uirouter - angularjs

Question

I have multi steps form in my application and i would like to save it before go to the next step...
I did an simple example, but i'm not sure if it's the right approach.
I used resolve config and a service to access to the formData.
Config
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url : '/',
controller : 'appCtrl',
templateUrl : 'partials/home.html',
resolve : {
saveform : function($state, FormData){
}
},
})
.state('home.state1', {
url: "state1",
templateUrl : 'partials/item1.html',
resolve : {
saveform : function($state, FormData){
return FormData.save();
}
},
})
.state('home.state2', {
url: "state2",
templateUrl : 'partials/item2.html',
resolve : {
saveform : function($state, FormData){
return FormData.save();
}
}
})
});
Controller
app.controller('appCtrl', function($scope, $rootScope, $state, saveform, FormData){
$scope.formData = {};
$scope.tempData = {};
$rootScope.$on('$stateChangeStart', function(event){
console.log($scope.tempData , $scope.formData)
if(!_.isEqual($scope.tempData , $scope.formData)){
console.log('OK CHANGE DETECTED, SAVE')
var temp = {}
FormData.set(angular.copy($scope.formData));
}else{
console.log('NO CHANGE')
}
});
$rootScope.$on('$stateChangeSuccess', function(event){
var temp = FormData.get();
if(Object.keys(temp).length!=0){
FormData.cancel();
angular.copy(temp, $scope.tempData );
angular.copy(temp, $scope.formData );
}
});
})
Service
app.service('FormData', function($q, $timeout){
this.formdata = {};
this.save = function(){
if(Object.keys(this.formdata).length===0)
return false;
var deferred = $q.defer();
$timeout(function() {
this.formdata.test = "YEAH TEST";
deferred.resolve(this.formdata);
//this.formdata = {};
}.bind(this), 1000);
return deferred.promise;
}
this.cancel = function(){
this.formdata = {};
}
this.set = function(data){
this.formdata = data;
}
this.get = function(){
return this.formdata;
}
})
Example on codepen : http://codepen.io/anon/pen/RWpZGj

Answer 1

I would approach this differently.
You're using multiple states for one single form. Usually you only want to save complete form data. Therefore I would devide the form into multiple sections that you can show/hide. That way, upon clicking your "next" button you can validate each step separately and show the next step once the current one is valid.
Once you've reached the last step of your form, you can save the whole thing in one go.
If you insist on using separate states:
You're using the state change to trigger a save action. Instead, use the response of your FormData service to trigger a statechange. That way you can validate and save your data before you move on to the next step. It also prevents you from saving data when someone moves to another state that is not in your multi-step form.