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

时间:2013-07-10 02:27:10

标签: angularjs angularjs-directive

我正在尝试创建一个可重复使用的指令,它将简单地重置我的表单,并使用$setPristine()方法将其子控件设置为pristine如果所有表单的输入控件在用户之前已与它们进行交互并被标记后清空他们很脏。

所以基本上该指令会监视所有形式<input>元素,如果它确定所有元素都是空的,则调用$setPristine()将所有内容重置为方形。

这看起来有点微不足道,我可以在5分钟内用jQuery破解,但我只是在与Angular一起弄湿了我已经在这里磕磕绊绊几个小时挣扎着最好的方法所以任何非常感谢帮助或指导!

2 个答案:

答案 0 :(得分:2)

修改,更简单的回答:使用表单元素上的requireng-require属性,如果出现错误,请保留表单$pristine

如果不需要:

注意 - $ setPristine()需要角度版本1.1.x。

假设表单中的所有ng-model都是同一对象的属性,您可以$watch该对象,遍历属性以查看它们是undefined还是{ {1}}空字符串,如果是'',则为$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> 

在控制器或指令中,$观察模型的变化,然后遍历对象,查看所有属性是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

答案 1 :(得分:0)

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