8

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

  <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で行うことです。

4

2 に答える 2

9

$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-23T16:20:35.393 に答える