AngularJs。$ setPristineからフォームをリセットする

Question

フォームが送信されると、フォームをリセットするのに苦労しました。誰かが投稿したこのHereを投稿しましたが、うまくいきませんでした。ここに私のMy Code Exampleです。

$scope.form.$setPristine();Pristine: {{user_form.$pristine}}〜がに設定されていません。上記の例を参照してください。

Answer 1

$ setPristine（）は、angularjsの1.1.xブランチに導入されました。 1.0.7ではなく、そのバージョンを使用する必要があります。

ちょうどv1.1.xにアップグレードすることなく、$setPristineを取得したい人のためのhttp://plnkr.co/edit/815Bml?p=preview

Answer 2

を参照してください、ここで私は$setPristine機能をシミュレートする機能です。私が使用したAngularUIコンポーネントの1つに互換性がないため、v1.1.5を使用することを嫌っていました。

 var setPristine = function(form){ 
      if(form.$setPristine){//only supported from v1.1.x 
       form.$setPristine(); 
      }else{ 

       /* 
       *Underscore looping form properties, you can use for loop too like: 
       *for(var i in form){ 
       * var input = form[i]; ... 
       */ 
       _.each(form, function (input) 
       { 
        if (input.$dirty) { 
         input.$dirty = false; 
        } 
       }); 
      } 
     }; 

それが唯一の$scope.myForm.myField.$dirty && $scope.myForm.myField.$invalid LIKE「ショーエラー」条件を変更$dirtyフィールド清潔で助けになることに注意してください。

フォームオブジェクトの他の部分（CSSクラスのような）はまだ検討する必要がありますが、これは私の問題を解決します：エラーメッセージを隠します。

私が充填され、提出された後、私のユースケース、フォームの角度バージョン1.0.7（なしの$ setPristine法）

にその自然のままの状態でフォームをリセットすることの同じ問題が消えなければなりません解決

Answer 3

別のレコードを埋めるために再び必要になるまで。だから、ng-showの代わりにng-switchを使ってshow/hide効果を作った。私が思ったように、ng-switchを使うと、フォームのDOMサブツリーが完全に削除され、後で再作成されます。したがって、元の状態が自動的に復元されます。

私はそれが好きですが、それはシンプルで清潔ですが、誰の用途にも合わない可能性があります。

私は、この問題にまだ直面していませんでした。

Answer 4

DavidLn's answerは過去に私にとってはうまくいきました。しかし、setPristineのすべての機能を捕捉するわけではなく、今回は私を驚かせました。

var form_set_pristine = function(form){ 
    // 2013-12-20 DF TODO: remove this function on Angular 1.1.x+ upgrade 
    // function is included natively 

    if(form.$setPristine){ 
     form.$setPristine(); 
    } else { 
     form.$pristine = true; 
     form.$dirty = false; 
     angular.forEach(form, function (input, key) { 
      if (input.$pristine) 
       input.$pristine = true; 
      if (input.$dirty) { 
       input.$dirty = false; 
      } 
     }); 
    } 
}; 

Answer 5

コントローラにフォームを送信することであるフォームを自然のままにする別の方法があります：ここでは充実したシムです。鑑み

： - - ：

<form name="myForm" ng-submit="addUser(myForm)" novalidate> 
    <input type="text" ng-mode="user.name"/> 
    <span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid"> 
     <span ng-show="myForm.name.$error.required">Name is required.</span> 
    </span> 

    <button ng-disabled="myForm.$invalid">Add User</button> 
</form> 

コントローラ内

： - 例えば

$scope.addUser = function(myForm) { 
     myForm.$setPristine(); 
}; 

Answer 6

、Iは自然のままに戻ってフォームを設定しなければならなかった同様の問題を有していました$ invalidと$ errorの両方がエラーメッセージを表示するために使用されていたため、変更されていません。エラーメッセージをクリアするには、setPristine（）を使用するだけでは不十分でした。

setPristine（）とsetUntouched（）を使用して解決しました。

だから、私のコントローラでは、私が使用： （https://docs.angularjs.org/api/ng/type/ngModel.NgModelController角度のマニュアルを参照してください）：

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

これら2つの関数は$手付かずとバック手つかず$への完全な形をリセットし、すべてのエラーメッセージがあったことがそうクリアされました。