重置字段值时，表单未进入初始状态答案

【问题标题】：while resetting the field values, the form is not getting to the initial state重置字段值时，表单未进入初始状态
【发布时间】：2015-08-13 08:46:17
【问题描述】：

单击重置按钮时，我正在清除所有字段。但是，表单状态未设置为初始状态。有一些错误。如果它是 ng-valid 或 ng-invalid，我正在更改文本的颜色。一旦字段值被重置，如何将表单带入初始状态。

HTML 代码

    <style>
    input.ng-invalid {
            border: 1px solid #FCD8C8;

        }
        input.ng-valid {
            border: 1px solid  #B3F7BC;
            background-color: #E7F2E9;
        }

    </style>
<div ng-controller="DBController">
        <div style="display:inline-block;vertical-align:top;aligh:right;float:right">
                <button >Save</button>
                <button ng-click="resetDashboard()">Reset </button>
            </div>


        <form name="DashboardForm" ng-model="DashboardForm" novalidate class="css-form">
        <br>

        <p>Title:   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" name="title" ng-model="dashboard.title" required ng-minlength="3" ng-maxlength="20">
        <span style="color:red" ng-show="DashboardForm.title.$invalid">
        <span ng-show="DashboardForm.title.$error.required">required.</span>
        <span ng-show="DashboardForm.title.$error.minlength">Title is too short.</span> 
        <span ng-show="DashboardForm.title.$error.maxlength">Title is too long.</span>  
        </span>

        <br>

        <p>Description: &nbsp;&nbsp;&nbsp;
        <input type="textarea" style="border-radius:3px;width:300px;height:30px" name="description" ng-model="dashboard.description"  ng-minlength="3" ng-maxlength="1050" required>
        <span style="color:red" ng-show="DashboardForm.description.$invalid">
            <span ng-show="DashboardForm.description.$error.required">required.</span>
            <span ng-show="DashboardForm.description.$error.minlength">Description is too short.</span> 
            <span ng-show="DashboardForm.description.$error.maxlength">Description is too long.</span>  
        </span>
        </p>

        </form>
</div>

JS 代码

    ;(function() {
        "use strict";
         angular.module('App')
        .controller('DBController', ['$scope', '$log','$window', 
                                        function($scope, $log,window) {

            $scope.title = null;
            $scope.description = null;

            var defaultdashboardForm = {
                  title : "",
                  description : ""
              };

            $scope.resetDashboard = function()
            {
                $scope.dashboard.title='';
                $scope.dashboard.description='';
            }

        }]);
    })();

Problem Plunkr

【问题讨论】：

那是因为您使用了ng-minlength，它不会在您的ng-model 中增加价值。看看这个stackoverflow.com/a/28338146/2435473 会让您了解幕后发生的事情跨度>
感谢 pankaj。现在我如何清除一个值但仍然有效。我设置为空。为什么在加载表单时没有发生这种情况。当时没有为文本框分配值。
你有没有仔细阅读过我的回答...只有你才会知道为什么会这样。

标签： angularjs

【解决方案1】：

为什么你的方法行不通。你可以通过Explanation here找到答案

你可以通过某种 hack 来解决这个问题。在清除 ng-model 值之前使它们有效，然后清除 ng-model 的值

$scope.resetDashboard = function() {
    //make field valid so that that gets filled into the ng-model & we can clear it.
    $scope.DashboardForm.title.$setValidity('minlength', false)
    $scope.DashboardForm.description.$setValidity('minlength', false)
    $scope.dashboard.title = '';
    $scope.dashboard.description = '';
}

Working Plunkr

【讨论】：

感谢普什卡。我从这个链接stackoverflow.com/questions/27191744/setpristine-not-working 得到了关于如何解决这个问题的精彩答案。我试过了，它工作正常。一旦 ng-dirty 类被重置为原始状态，范围变量必须被重置。
如果它确实有效，你可以接受我的答案..bdw 我是 Pankaj 而不是 pushkar
被帕卡弄糊涂了... 抱歉 pankaj。
@user2010243 没有问题..很高兴帮助你..谢谢 :)

【解决方案2】：

您是否尝试过使用$scope.DashboardForm.$setPristine(true)？

$setPristine

【讨论】：

我试过了。我想要的是文本框的背景色应该设置为白色，就像加载表单时一样。现在，输入文本框中添加了一种颜色，该颜色不会被删除。