AngularJS - 清空所有控件时使用 $setPristine() 重置表单答案

【问题标题】：AngularJS - Reset form using $setPristine() when all controls are emptiedAngularJS - 清空所有控件时使用 $setPristine() 重置表单
【发布时间】：2013-07-10 02:27:10
【问题描述】：

我正在尝试创建一个可重用的指令，该指令将使用$setPristine() 方法简单地将我的表单及其子控件重置为原始状态如果在用户之前与它们交互并将它们标记为脏后所有表单的输入控件都被清空.

所以基本上该指令将监视所有表单 <input> 元素，如果它确定所有元素都是空的，则调用 $setPristine() 将所有内容重置为第一格。

这似乎有点微不足道，我可以在 5 分钟内用 jQuery 搞定，但我只是用 Angular 弄湿了我的脚，我已经在这个问题上磕磕绊绊了几个小时，努力寻找最好的方法，所以任何非常感谢您的帮助或指导！

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

编辑，更简单的答案：在表单元素上使用require 或ng-require 属性，如果出现错误，请保留表单$pristine。

如果不需要：

注意 - 对于 $setPristine()，您需要 Angular 版本 1.1.x。

假设表单中的所有ng-model 都是同一个对象的属性，您可以$watch 对象，遍历属性以查看它们是undefined 还是'' 空字符串，然后$setPristine() 如果是的话。

表单 HTML - 所有模型都是 input 对象的属性：

<form name="form">
  <input type="text" name="one" ng-model="input.one">
  <input type="text" name="two" ng-model="input.two"><br/>
  <input type="submit" ng-disabled="form.$pristine">
</form>

在控制器或指令中，$watch 模型的变化，然后循环遍历对象，查看所有属性是undefined 还是''。（如果在链接函数中使用，您通常会使用scope 代替$scope。

var setPristine = function(input){
    if (input === undefined || input === ''){
        return 0;
    }
    return 1;
}

$scope.$watch('input', function(i){
    var flag = 0;
    //loop through the model properties
    for (var obj in i){
        flag +=setPristine(i[obj]);
    }
    // if nothing in the model object, setPristine()
    if(flag===0){
        $scope.form.$setPristine();
    }
}, true)// true allows $watch of object properties, with some overhead

【讨论】：

谢谢！我的问题是——在可重用指令中使用这个例子并不能真正起作用，因为它依赖于一个名为“输入”的模型——我有很多模型“用户”、“产品”等，所以我希望只是检查一下任何形式的通用形式<input> 元素，而不是检查底层模型。是否可以在 <input> 元素上使用 $watch 或类似的元素？
当然，我现在正在尝试。 $watching 一个属性对象被证明有点棘手;)。

【解决方案2】：

使用表单的脏/原始状态来了解用户是否触摸过它们，并使用 ng-pattern 来了解该字段是否为空，使用像 /.+/ 这样的正则表达式。然后你可以检查 myForm.$dirty 和 myForm.$error.pattern 瞧！

【讨论】：