BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] angularjsでフォームをリセットするにはどうしたらいいですか？

2022-02-12 06:38:48

質問

フィドルをご覧ください。 http://jsfiddle.net/hejado/7bqjqc2w/

angularを使ってform.reset()しようとしているのですが、どうすればいいですか？

HTMLです。 

<div ng-controller="formCtrl">
<form name="resetme" id="resetme">
    <input ng-model="text" type="text" />
    <input file-model="file" type="file" />
    <button type="button" ng-click="resetForm()">reset</button>
</form>
</div>

JSです。 

.controller('formCtrl', function($scope) {
    $scope.resetForm = function() {
    //$scope.resetme.reset();
    document.getElementById('resetme').reset();
    };
});

ご注意ください。 このようなフォームを使って、ファイルをajaxアップロードしています。ページは更新されないので、リセットボタンは使いたくありません。(簡単のためにフィドルで1つ使っています。) ファイルアップロードが終了した後、reset-functionを呼び出したいのです(http success経由で)。

を使っています。 

<input type="file" />

というわけで、ファイル入力は読み取り専用なので、すべての入力に空の値を再割り当てすることはできません。

DOM要素にreset()関数を呼び出すとうまくいきますが、angularでDOMに話しかけるのは邪道だと言われたので...。

知りたいのは、これがどのように行われるかというと アンギュラーウェイ . フォームに名前を付けて、$scopeで参照してみました。 フォーム名 が、Web API 関数を呼び出すことができない......。(コメント行)

どうすれば実現できますか？

アップデイト いくつかの回答を読んだ後、私はngModelとカスタムディレクティブを使っていることを明確にする必要があります。 ファイルモデル を使用して、ファイル・オブジェクトを取得します。

いくつかの解決策は、入力フィールドの値をリセットすることに成功しましたが、モデルはクリアされません（ファイルでもテキストでもありません）。カスタムディレクティブがその答えですが、これはちょっとこの質問の範囲を超えています。

解決方法は？

について書きました。 このトピック 数年前のことです。Angularチームがまだネイティブのフォームリセットディレクティブを実装しているかどうかは知りませんが、自分で実装することは可能です。この実装にはいくつかの注意点があります: これは1つのモデルに対してのみ動作します。 ポスト ) と、元の値をいつ初期化するかという問題があります。また、ファイル入力でのテストはしていませんので、ファイル入力で動作するかどうかはわかりません。

がありました。 問題 しかし、それは活動停止のために閉鎖されました。 

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

myApp.controller('MyCtrl', ['$scope',
  function($scope) {
    $scope.myModel = {
      foo: 'Boop',
      bar: 'Beep'
    };
    $scope.myModelCopy = angular.copy($scope.myModel);
  }
]);

myApp.directive('resetDirective', ['$parse',
  function($parse) {
    return function(scope, element, attr) {
      var fn = $parse(attr.resetDirective);
      var masterModel = angular.copy(fn(scope));

      // Error check to see if expression returned a model
      if (!fn.assign) {
        throw Error('Expression is required to be a model: ' + attr.resetDirective);
      }

      element.bind('reset', function(event) {
        scope.$apply(function() {
          fn.assign(scope, angular.copy(masterModel));
          scope.form.$setPristine();
        });

        // TODO: memoize prevention method
        if (event.preventDefault) {
          return event.preventDefault();
        } else {
          return false;
        }
      });
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form reset-directive="myModel" name="form">
      <input type="text" ng-model="myModel.foo" />
      <input type="text" ng-model="myModel.bar" />
      <input type="reset" value="Reset" />
      <pre>myModel: {{ myModel | json }}</pre>
      <pre>myModelCopy: {{ myModelCopy | json }}</pre>
      <pre>form pristine: {{ form.$pristine }}</pre>
    </form>
  </div>
</body>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します