Question

我有一个使用AngularJS创建的表单。表格是一种问卷类型表格，可以连续多次提交。表单是文本区域和下拉选择字段的混合。

表单有很多问题，每次提交表单时都需要重置为默认值。

我设法使用 $ setPristine（） 清除文本区域，但下拉字段不会停留为默认值 - 它们保留为以前在表单中选择的时间提交后，您再次重新访问该表单。如何重置表单上的所有字段 - 包括下拉列表选择？我不想单独重置每个字段，因为正如我所提到的，每个表单可能存在大量问题，手动重置每个问题都是低效的。

以下是我的表单查看

的一小部分示例

<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>

我的控制器处理用户提交的值并按预期工作。然后，当用户提交表单时，我会触发submit（）函数，该函数将数据发送到服务器并将for设置为 pristine 。但是，下拉选择值未重置。

我的观点控制器

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

我会为表单下拉选项创建值，如下所示。

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;
        },
    };
});

Answer 1

将scope severity的副本创建为variable original。

然后，在将$scope.severity设置为original variable

时重置

$scope.severity= angular.copy($scope.original);这会将表单重置为旧数据。

以下是代码：

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

使用AngularJS在表单提交上将选择字段重新设置为默认值

1 个答案: