In previous articles, we have learned AngularJS project setup, styling with Bootstrap, AngularJS structure, data-binding, routing, etc.

Please have a look on my previous articles before going through this article.

Angular, Bootstrap And ASP.NET MVC – Part One

Angular, Bootstrap And ASP.NET MVC – Part Two

Angular, Bootstrap And ASP.NET MVC – Part Three

Angular, Bootstrap And ASP.NET MVC – Part Four

In this tutorial, we are going to learn how we can save the form data when save button is clicked and reset the form when the cancel button is clicked.

Step 1:

When you have a look in “sfTemplate.html” from previous articles (Part – 4), we have a submit button. Let’s add Cancel button bedside this submit button and add respective click events (submitForm() and cancelForm()).

 

We have implemented routing in the previous article so when you run the application, at first it will show home page with “Add new student” button as below.

When you click on that button then you will be redirected to “sfTemplate.html”. You can see two buttons at the bottom of the page as below.

Step 2:

In the “sfController.js”, let’s add respective click events like:

 

Step 3:

Let’s make some change in the form data and click on submit button then go back to the home page. When we go into the form page again, then data are restored with the latest data. Data has been saved in the “$scope” since we have 2-way data binding implementation.

When we click on the Cancel button and then it should reset the data but in this case, it is not resetting. So, when we click on the cancel button, any changes that were made in the form should be reverted. The edited value is stored in the “$scope”.

This is fine while submitting the form but not good when canceling the form.

To avoid this, we can create a copy of “student” variable. When we submit the form then we will copy this updated variable back into “student” variable and when we cancel the form, we will do nothing.

This is our “sfController.js” code snippet:

 

 

Step 4:

AngularJS provides an easy way to copy an object. Let’s create an object with name “updatedStudent” and call “angular.copy” passing “$scope.student”. It will look like:

 

When we submit the form, we just copy it back to “$scope.student”. So inside click event of submit button we will copy “$scope.updatedStudent” to “$scope.student” object like:

 

Here, we are updating “$scope.student” with the new data that is stored in “$scope.updatedStudent”.

Step5:

Next, we need to update with the “updatedStudent” where there is “student” variable. So, in “sfTemplate.html”, replace “student” with “updatedStudent” in every ng-model.

Complete code snippet of “sfController.js” will look like:

 

Here, we have added code for going back to home page on click of both Submit and Cancel buttons. The main idea is that we have saved updated form data ($scope.updatedStudent) in another “$scope.student” variable. This helps to save the form data when submit button is clicked and reverted back to original data when the cancel button is clicked.

New “sfTemplate.html” with “ng-model” updated with “updatedStudent”:

 

Get the complete project from GitHub.

We have learned to save form data in AngularJS. We will continue to learn more in next articles. Keep you posted.

Thanks, Happy Coding.