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

Posted 2023-05-09

【中文标题】使用 AngularJS 在表单提交时将选择字段重新设置为默认值

【英文标题】：Re-setting select field to default on form submit using AngularJS

【发布时间】：2017-04-14 14:03:01

【问题描述】：

我有一个使用 AngularJS 创建的表单。表单为问卷式表单，可连续多次提交。该表单混合了文本区域和下拉选择字段。

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

我设法使用 $setPristine() 清除了文本区域，但下拉字段不会保留为默认值 - 当表单是提交，然后您再次重新访问表单。如何重置表单上的所有字段 - 包括下拉 select？我不想单独重置每个字段，因为正如我所提到的，每个表单可能有大量问题，并且手动重置每个问题效率低下。

下面是我的表单视图

的一个小样本

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

【参考方案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();
    ;
);

【讨论】：

不幸的是，这不起作用。提交表单并触发更新的代码后，它仍会在下拉列表中显示最后一个选择。

试试。 $scope.severity= $scope.original; 并检查，即使没有工作，制作$scope.severity = 并检查它是否反映？