2013-07-10 36 views
0

我试图创建一个可重用的指令,它将简单地重置我的表单,并且它的子控件使用$setPristine()方法原始化如果所有表单的输入控件都被清空用户先前已与之交互并将其标记为脏。

所以基本上这个指令会监控所有表格<input>元素,如果它确定所有元素都是空的,请调用$setPristine()将所有的东西都重置回原点。

这似乎是一种微不足道的东西,我可以用jQuery在5分钟内淘汰掉一些东西,但我只是让我的脚湿透了Angular,而且我一直在徘徊这个几个小时,以最好的方式挣扎任何帮助或指导,非常感谢!

回答

2

编辑,更容易回答:在表单元素上使用requireng-require属性,如果出现错误,则保留表单$pristine

如果需要不想要的东西:

注 - 您需要为$ setPristine()角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> 

在控制器或指令,$监视更改模型,然后通过对象循环,如果所有属性都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 
+0

感谢你!我的问题是 - 在可重用的范例中使用此示例指令不会真正起作用,因为它取决于一个叫做“输入”的模型 - 我有许多模型的'用户','产品'等,所以我希望只是检查任何形式的通用形式元素[] n检查基础模型。是否可以在''元素上使用'$ watch'或者其他等价物? – mmacneil007

+0

当然,我现在正在尝试。 $看一个属性对象有点棘手;)。 – rGil

0

使用形式的脏/原始状态知道,如果用户已经打动了他们,和NG-图案知道这个字段是空的或者没有像/.+/那样的正则表达式。然后你可以检查myForm。$ dirty和myForm。$ error.pattern和voila!