$setPristine() 不工作。答案

【问题标题】：$setPristine() not working.$setPristine() 不工作。
【发布时间】：2017-11-19 17:57:23
【问题描述】：

**** 注意我删掉了一些其他函数，以便可以更快地阅读代码。我无法清除表格。当我单击具有取消功能的按钮时。我以为我可以设置一个默认表单，但这并没有什么不同。

<form  name="myForm" novalidate ng-submit="submit()"> 
    <table class="mealCost"> 

        <!-- descriptions -->
        <tr> 
            <td> Base Meal Price: </td>
            <td><input type="number" name="price" ng-model="mealPrice" required></td>
        </tr>
        <!-- waiter puts in the info -->
        <tr> 
            <td> Tax Rate: % </td>
            <td><input type="number" step="0.01" name="tax" ng-model="mealTax" required></td>

        </tr>

        <tr> 
            <td> Tip Percentage: % </td>
            <td><input type="number"  name="tip" step="0.01" ng-model="tipPercent" required></td>

        </tr>

    </table>

    <p class="userResponse"> 
    <input type="submit" value="Submit"> 
    <!-- <input id="cancel" type="submit" value="Cancel" ng-submit="cancel(original)"> -->
    <button ng-click="cancel()">Start Over</button>
    </p>

</form>

这是我的 javascript，我正在尝试使用带有 ng-click 的按钮命令将我的表单设置为 $setPristine。我虽然设置默认表单会有所帮助，但提交时没有任何反应

var app = angular.module('myApp',[]).
    controller('costController', function($scope) {
        // $scope.ready= false;
        $scope.mealPrice ="" ;
        $scope.mealTax = 0.05;
        $scope.tipPercent =0.05; 
        //  possibly could do 

        var defaultForm={
            price: "",
            tax: "",
            tip:""
        }

$scope.cancel = function() {
            $scope.myForm.$setPristine();
            $scope.user = angular.copy(defaultForm);
            console.log('empty');
        }

【问题讨论】：

标签： angularjs

【解决方案1】：

我认为你用错了。

$setPristine：

“可以调用此方法来移除 'ng-dirty' 类并将表单设置为其原始状态（ng-pristine 类）。此方法还将传播到此表单中包含的所有控件。”

所以这只会清除类而不是 $scope 变量。您确实重置了 $scope.user 变量，可以说：

添加“用户”。在 Html 中的每个模型前面

ng-model="user.tipPercent"
ng-model="user.mealTax"
ng-model="user.mealPrice"

并在你的 JS 中替换它：

// $scope.ready= false;
$scope.mealPrice ="" ;
$scope.mealTax = 0.05;
$scope.tipPercent =0.05; 
//  possibly could do 

var defaultForm={
    price: "",
    tax: "",
    tip:""
}

$scope.cancel = function() {
    $scope.myForm.$setPristine();
    $scope.user = angular.copy(defaultForm);
    console.log('empty');
}

到这里：

var defaultForm = {
    mealPrice : "",
    mealTax : 0.05,
    tipPercent : 0.05
}

$scope.user = angular.copy(defaultForm);

$scope.cancel = function () {
    $scope.myForm.$setPristine();
    $scope.user = angular.copy(defaultForm);
    console.log('empty');
}

【讨论】：

非常感谢杰森。我已经编辑了十几次并且接近了。添加用户。修好了！
我按照上面的解释示例但每次都得到“错误：错误：未定义不是对象（评估'$scope.ContactForm.$setPristine'）”

【解决方案2】：

$scope.master = {};

$scope.reset = function(form) {

      if (form) {
          form.$setPristine();
           $scope.user = angular.copy($scope.master);
         form.$setUntouched();
      }

【讨论】：

如果您添加一些解释性文字，也许还会提供一些相关文档的链接，这将真正改善您的答案。问这个问题的人，以及将来阅读这个问题的任何其他人，如果不复制/粘贴随机代码并运行它，将无法判断您的解决方案是否有效。这从来都不是一个好主意。解释这是做什么的，为什么这样做，以及为什么它与问题有关。解释为什么这比 6 个月前接受的答案更好或不同。
表单在 Bootstrap Modal 中显示。所以每次我展示它时，我都会重置模型。但是，如果我尝试保存空表单，出现错误并关闭模式并重新打开它，错误并没有被清除。大多数时候，表单中的错误显示与 formName.fieldName.touched == true 结合在一起。所以只是设置 form.$setUntouched() 对我有用。谢谢

【解决方案3】：

如果ng-model 绑定到$scope.user.price、$scope.user.tax 和$scope.user.tip，这将起作用。但是，它们绑定到$scope.price、$scope.tax 和$scope.tip。

设置$pristine 形式仅将值标记为用户未修改。它实际上并没有改变值。

解决方案 A：

将模型绑定到user.*并替换

$scope.mealPrice = '';
$scope.mealTax = 0.05;
$scope.tipPercent = 0.05;

与

$scope.user = {
    mealPrice: '',
    mealTax: 0.05,
    tipPercent: 0.05
};

解决方案 B：

替换：

$scope.user = angular.copy(defaultForm);

与

$scope.mealPrice = defaultFrom.mealPrice;
$scope.mealTax = defaultFrom.mealTax;
$scope.tipPercent = defaultFrom.tipPercent;

【讨论】：