AngularJS, Bootstrap And ASP.NET MVC - Part Five (Saving/ Cancelling Form)

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.

• 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 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();
        }
    });

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 Cancel button is clicked.

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

<form role="form" class="form-horizontal">
    <fieldset>
        <legend>Basic Information</legend>
        <div class="form-group">
            <label for="fullName" class="col-sm-3 control-label">Name</label>
            <div class="col-sm-9">
                <input type="text" id="fullName" name="fullName" class="form-control"
                       ng-model="updatedStudent.fullName" />
            </div>
        </div>
        <div class="form-group">
            <label for="objective" class="col-sm-3 control-label">Objective</label>
            <div class="col-sm-9">
                <textarea name="objective" id="objective" class="form-control" rows="5" cols="40" ng-model="updatedStudent.objective"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label for="department" class="col-sm-3 control-label">Department</label>
            <div class="col-sm-9">
                <select name="department" id="department" class="form-control"
                        ng-model="updatedStudent.department"
                        ng-options="dept for dept in departments"></select>
            </div>
        </div>
    </fieldset>

    <br />

    <fieldset>
        <legend>Hobbies</legend>
        <div class="form-group">
            <div class="col-sm-3">

            </div>
            <div class="col-sm-9">
                <div class="checkbox">
                    <label><input type="checkbox" value="hobbiesTravel" ng-model="updatedStudent.hobbiesTravel" />Travelling</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="hobbiesPhotography" ng-model="updatedStudent.hobbiesPhotography" />Photography</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="hobbiesGaming" ng-model="updatedStudent.hobbiesGaming" />Gaming</label>
                </div>
                <br />
            </div>
        </div>
    </fieldset>

    <fieldset>
        <legend>Gender</legend>
        <div class="form-group">
            <div class="col-sm-3"></div>
            <div class="col-sm-9">
                <div class="radio">
                    <label><input type="radio" name="gender" value="Male" ng-model="updatedStudent.gender" /> Male</label><br />
                </div>
                <div class="radio">
                    <label><input type="radio" name="gender" value="Female" ng-model="updatedStudent.gender" /> Female</label><br />
                </div>
                <br />
            </div>
        </div>
    </fieldset>
    <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>
</form>

Get the complete project from GitHub.

We learned saving of form data in AngularJS. We will continue to learn more in the next articles.