AngularJs空表單並從輸入中刪除無效狀態

我正在使用表單將元素添加到顯示在窗體一側的列表中。標記是：AngularJs空表單並從輸入中刪除無效狀態

<form name="thingForm"> 
     <input required type="text" ng-model="thing.name"/> 
     <input required type="text" ng-model="thing.value"/> 
     <input type="submit" ng-click="addThing(thing)"/> 
    </form> 
    <ul> 
     <li ng-repeat="thing in things">{{thing.name}} with value of {{thing.value}}</li> 
    </ul>

並在控制器我有：

$scope.things = []; 
$scope.addThing = function(thing) { 
    $scope.things.push(thing); 
    $scope.thing = {}; 
};

工作的jsfiddle：http://jsfiddle.net/cXU2H/1/

現在你可以看到，我可以通過清空模型清空形式，但是由於輸入具有所需的標籤，因此瀏覽器仍顯示錯誤消息（至少Chrome會這樣做）。

我看着類似的問題和：

我也看了這樣的回答：https://stackoverflow.com/a/16296941/545925不過的jsfiddle行爲完全一樣在我的例子：輸入被清除後，它仍然有一個ng-invalid-required其餘類（它也觸發HTML5的錯誤消息）
~~因爲我不是在1.1.x版本分支$setPristine()不適用於我~~$setPristine()的工作方式

我當然可以編寫一個遍歷表單元素的函數，並刪除每個類的所有ng-invalid-required和ng-invalid，但這不是我想解決這個問題的方式。這是我會用jQuery做的。

來源

2013-07-23 adamors

'$ setPristine（）'在這裏是正確的方法。如果你不想切換到1.1.x只是用這個提交猴子修補你的版本：https://github.com/angular/angular.js/commit/733a97adf87bf8f7ec6be22b37c4676cf7b5fc2b –

1.1.x分支是否破壞1.0.x版本？ – adamors

1.1.x中存在大量更改，並且存在重大更改。請參閱更新日誌：https：//github.com/angular/angular.js/blob/master/CHANGELOG.md –

您是否正在使用$ setPristine？你可以很容易地看到你的小提琴，如果你添加它，它的作品。 http://jsfiddle.net/X6brs/

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.things = []; 
    $scope.addThing = function(thing) { 
     $scope.things.push(thing); 
     $scope.thing = {}; 
     $scope.thingForm.$setPristine(true); 
    }; 
}

來源

2013-07-23 16:20:35

它沒有。在Chrome中，輸入被清除後，我立即收到HTML5錯誤，提示「請填寫此字段」。 – adamors

這是一個不同的問題，提交後它將重點關注第一個無效字段;或者將輸入類型更改爲按鈕而不是提交，或者執行event.preventDefault（）並按照您的方式處理提交。 –

你說得對。我在按鈕上添加了一個preventDefault，它工作。謝謝。 – adamors

$scope.thingForm.$setPristine(); 
$scope.thingForm.$setUntouched();

會做的伎倆。

來源

2015-10-01 19:59:09 Trostik

AngularJs空表單並從輸入中刪除無效狀態

回答

相關問題