Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I have a form created using AngularJS. The form is a questionnaire type form that can be submitted multiple times in a row. The form is a mix of text areas and drop-down select fields.

The form has quite a few number of questions and they need to be reset to default each time the form is submitted.

I manage to clear the text areas using $setPristine() but the drop-down fields dont rest to default values - they stay as previously selected when the form is submitted and you then revisit the form again. How do I reset all fields on the form - including the drop-down select? I dont want to reset each field individually because, as I mentioned, there can be a large number of questions per form and it would be inefficient to manually reset each question.

Below is a small sample of my form view

<div ng-controller="FormController" data-ng-init="init()">
    <ons-page>
        <!-- Form Start -->
            <form class="questionnaire-form" name="myForm" novalidate>
                <section class="form-section">
                    <ons-row>
                        <ons-col>
                            <p class="form-header">Header 1</p>
                        </ons-col>
                    </ons-row>
                    <ons-row>
                        <ons-col>
                            <p class="form-field-text">
                                <span style="color: #f76327">*</span> Outcome
                            </p>
                        </ons-col>
                    </ons-row>
                    <ons-row>
                        <ons-col width="90%">
                            <select id="outcome" name="outcome"
                                    ng-model="severity.desc"
                                    ng-options="severityOption.desc as severityOption.desc for severityOption in severity"
                                    ng-change="changedValue(severity.desc, 'Severity')">
                                <option value="" label="-- Please Select --"></option>
                            </select>
                        </ons-col>
                    </ons-row>

                    <ons-row>
                        <ons-col>
                            <p class="form-field-text">
                                <span style="color: #f76327">*</span> PICW
                            </p>
                        </ons-col>
                    </ons-row>
                    <ons-row ng-hide="toggle">
                        <ons-col width="90%">
                            <textarea class="textarea"
                                      rows="1"
                                      placeholder="PICW"
                                      ng-model="picw"></textarea>
                        </ons-col>
                    </ons-row>
                </section>

                <section var="saveBtn" ng-click="submitForm()">Submit</ons-button>
                </section>
            </form>
        </ons-scroller>
    </ons-page>
</div>

My controller handles the values being submitted by the user and works as intended. Then when the user submits the form I fire the submit() function that sends the data to the server and sets the for to pristine. However, the drop-down select values arent reset.

My views controller

var formController = angular.module("formController ", []);
formController .controller("FormController", function ($scope, FormField) {
    var init = function () {
        document.addEventListener("deviceready", onDeviceReady, false);
    };

    init();

    function onDeviceReady() {
        // Set severity drop down value
        $scope.severity = FormField.getSeverity();
    };

    // Save details to database
    $scope.submitForm= function () {
        // Do form submit action here

        // Set form pristine
        $scope.myForm.$setPristine();
    };
});

And I would create the values for the form drop-down select as follows.

var formFields = angular.module("formField", []);
formFields.service("FormField", function () {
    // Severity
    var Severity = [ {
        desc: "Insignificant", id: "0"
    }, {
        desc: "Minor", id: "1"
    },{
        desc: "Moderate", id: "2"
    }, {
        desc: "Major", id: "3"
    }, {
        desc: "Catastrophic", id: "4"
    }];

    return {
        // Get severity
        getSeverity: function () {
            return Severity;
        },
    };
});
share|improve this question

Create a copy of the scope severity into a variable original.

Then, while resetting set $scope.severity to that original variable

$scope.severity= angular.copy($scope.original); this reset the form to the old data.

Here is the code:

var formController = angular.module("formController ", []);
formController .controller("FormController", function ($scope, FormField) {
    var init = function () {
        document.addEventListener("deviceready", onDeviceReady, false);
    };

    init();

    function onDeviceReady() {
        // Set severity drop down value
        $scope.severity = FormField.getSeverity();
        $scope.original = $scope.severity;
    };

    // Save details to database
    $scope.submitForm= function () {
        // Do form submit action here

        // Set form pristine
        $scope.severity= angular.copy($scope.original);
        $scope.myForm.$setPristine();
    };
});
share|improve this answer
    
Unfortunately this does not work. It still displays the last select in the drop-down list once the form has been submitted and the updated code is fired. – heyred 14 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.