In previous articles, we have learned AngularJS project setup, styling with bootstrap, AngularJS structure, data-binding, routing, etc. Please have a look at my previous articles before going through this article.
In this tutorial, we are going to learn how we can save the form data when the "Save" button is clicked and reset the form when "Cancel" button is clicked.
Step 1
Have a look in “sfTemplate.html” from previous articles (Part – 4) where we have a submit button. Let’s add "Cancel" button beside this Submit button and add respective click events (submitForm() and cancelForm()).
- <div class="col-sm-offset-3 col-sm-9">
- <input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()" />
- <input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()" />
- </div> 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, 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.
- $scope.submitForm = function () {
- alert("Form submitted");
- }
- $scope.cancelForm = function () {
- alert("Form cancelled");
- }
Step 3
Let’s make some change in the form data and click on "Submit" button. Now, go back to the home page. When we go into the form page again, the page gets 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, it should reset the data but in this case, it is not resetting. So, when we click on the "Cancel" button, any changes made in the form should be reverted. The edited value is stored in the “$scope”.
This works fine while submitting the form but not good when cancelling 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.
- studentFormsApp.controller('sfController',
- function sfController($scope, sfService) {
- $scope.student = sfService.student;
- $scope.departments = [
- "Math",
- "Physics",
- "Chemistry",
- "English"
- ];
- $scope.submitForm = function () {
- alert("Form submitted");
- }
- $scope.cancelForm = function () {
- alert("Form cancelled");
- }
- });
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”.
- $scope.updatedStudent = angular.copy($scope.student);
When we submit the form, we just copy it back to “$scope.student”. So, inside the click event of submit button, we will copy “$scope.updatedStudent” to “$scope.student” object like -
- $scope.submitForm = function () {
- $scope.student = angular.copy($scope.updatedStudent);
- }
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,
- studentFormsApp.controller('sfController',
- function sfController($scope, $window ,sfService) {
- $scope.student = sfService.student;
- $scope.updatedStudent = angular.copy($scope.student);
- $scope.departments = [
- "Math",
- "Physics",
- "Chemistry",
- "English"
- ];
- $scope.submitForm = function () {
- $scope.student = angular.copy($scope.updatedStudent);
- $window.history.back();
- }
- $scope.cancelForm = function () {
- $window.history.back();
- }
- });
Join the conversation! Your thoughts help the community grow.