AngularJS - 使用$ setPristine（）清除所有控件時重置表單

我試圖創建一個可重用的指令，它將簡單地重置我的表單，並且它的子控件使用$setPristine()方法原始化如果所有表單的輸入控件都被清空用戶先前已與之交互並將其標記爲髒。

所以基本上這個指令會監控所有表格<input>元素，如果它確定所有元素都是空的，請調用$setPristine()將所有的東西都重置回原點。

這似乎是一種微不足道的東西，我可以用jQuery在5分鐘內淘汰掉一些東西，但我只是讓我的腳溼透了Angular，而且我一直在徘徊這個幾個小時，以最好的方式掙扎任何幫助或指導，非常感謝！

來源

2013-07-10 mmacneil007

編輯，更容易回答：在表單元素上使用require或ng-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

來源

2013-07-10 06:10:55 rGil

感謝你！我的問題是 - 在可重用的範例中使用此示例指令不會真正起作用，因爲它取決於一個叫做「輸入」的模型 - 我有許多模型的'用戶'，'產品'等，所以我希望只是檢查任何形式的通用形式元素[] n檢查基礎模型。是否可以在''元素上使用'$ watch'或者其他等價物？ – mmacneil007

當然，我現在正在嘗試。 $看一個屬性對象有點棘手;）。 – rGil

使用形式的髒/原始狀態知道，如果用戶已經打動了他們，和NG-圖案知道這個字段是空的或者沒有像/.+/那樣的正則表達式。然後你可以檢查myForm。$ dirty和myForm。$ error.pattern和voila！

來源

2014-03-07 12:34:00 bluehallu

AngularJS - 使用$ setPristine（）清除所有控件時重置表單

回答

相關問題