AngularJs空のフォームと入力から無効な状態を削除

Question

私はフォームの側面に表示されるリストに要素を追加するためにフォームを使用しています。 マークアップは次のとおりです。

<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の場合）。

私は同様の質問を見て：jsfiddleは私の例のようにまったく同じ動作をしますがhttps://stackoverflow.com/a/16296941/545925：：私もこの答えを見てきました

• 入力がクリアされた後、それはまだng-invalid-requiredを持っています私は1.1.xのブランチ$setPristine()にいないよので、
• 残りの（と、それはまた、HTML5のエラーメッセージをトリガーする）クラスは私のために利用できない$setPristine()は同じよう

を振る舞います

もちろん、フォームの要素を反復処理し、すべてのng-invalid-requiredとng-invalidクラスを削除する関数を書くことはできますが、これは私がこれを解決したい方法ではありません。それがjQueryのやり方です。

Answer 1

あなたは$ 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); 
    }; 
} 

Answer 2

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

は、トリックを行います。