Angular フォーム ボタンによってページが更新されるのはなぜですか? それを停止するにはどうすればよいですか?

ページを更新せずに移動する: フォーム ボタンのクリックの問題を解決する

Angular でフォームを操作する場合、非クリック時に予期しない動作が発生することがよくあります。 - フォーム内の送信ボタン。場合によっては、ページが更新され、望ましくない結果が生じる可能性があります。この記事では、この動作の背後にある理由を調査し、不要なページの更新を防ぐための解決策を紹介します。

この問題は、通常、明示的に構成されていない限り、フォーム要素がクリックされたときにフォーム全体を送信するように設計されているために発生します。 Angular では、この動作は、「type」属性が指定されていないボタン要素の暗黙的な「submit」イベントによって、または「ng-click」イベントがボタンに適用されたときにトリガーされます。

次の例を考えてみましょう。

<form class="form-horizontal">
  <button>

「ng-click」イベントで「変更」ボタンがクリックされると、Angular は「showChangePassword()」関数は実行されますが、デフォルトのフォーム送信動作はそのまま残り、ページが更新されます。

この動作を防ぐための 1 つの解決策は、「type」属性を「button」に割り当てることです。

<form class="form-horizontal">
  <button>

「type="button"」を指定することにより、このボタンがフォーム送信をトリガーしないことを明示的に示します。これにより、Angular がデフォルトの送信アクションを開始するのを防ぎ、ページをリロードせずにカスタムの 'ng-click' イベントを実行できるようになります。

以上がAngular フォーム ボタンによってページが更新されるのはなぜですか? それを停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。