Angular: フォーム：NgFormがNgIfを介して削除/復元されると、ページが再読み込みされます

作成日 2016年02月01日 · 3コメント · ソース: angular/angular

奇妙ですが、無邪気に起こりました。

前のフォームをDOMから切り替えて、 activeフラグに固定されたNgIfを使用して戻すことにより、フォームリセット機能を実装しようとしました（欠落しています）。

<form *ngIf="active" 
          (ngSubmit)="onSubmit()" #heroForm="ngForm">

このようなコンポーネントclearメソッドによって制御されます

  clear() {
    this.model = new Hero(42, '', '');
    this.active = false;
    setTimeout(()=> this.active=true, 0);
  }

フォームが有効な場合（開始時）、[クリア]をクリックするとページが再読み込みされます。フォームが無効な場合（名前がないなど）、リロードは行われません。

プランカーによる再現は次のとおりです。
http://plnkr.co/edit/GNhLbONEDHyApCm9vUeh

ソース

wardbell

👍1

最も参考になるコメント

クリアボタンのタイプは「送信」です。したがって、それをクリックすると、フォームが送信されます。 NgFormは送信イベントをインターセプトすることになっていますが、NgIfはフォーム要素をDOMから削除するため、インターセプトは発生しません。ボタンの種類を「ボタン」に設定することで修正できます。

vsavkin 2016年02月01日

👍2 🎉1

vsavkin 2016年02月01日

👍2 🎉1

ありがとう。 <button> _タイプ属性なし_が送信ボタンと同じであることを知りませんでした。
この改訂されたプランカーに見られるように、それは問題を解決します： http ：//plnkr.co/edit/u3ltLP84JHn2VkoFKf46？p = preview

この問題を閉じて＃6822を開くと、このプランカーで示されているハックを置き換えるための明示的なreset機能が必要になります。

wardbell 2016年02月01日

👍1

この問題は、非アクティブのために自動的にロックされています。
同様の問題または関連する問題が発生した場合は、新しい問題を提出してください。

_{_このアクションはボットによって自動的に実行されました。_}

angular-automatic-lock-bot[bot] 2019年09月08日

このページは役に立ちましたか？

0 / 5 - 0 評価