私はAngularJSにかなり慣れていないので、「ログイン」フォームを持つ単一ページのアプリケーションを試しています。フォームは「ng-submit」によってバインドされ、認証が成功した場合、そのコントローラーは AJAX 呼び出しを行い、トークンを返します。後続の AJAX 呼び出しは、このトークンを渡します。(いいえ、基本認証を使用したくありません。ハッキングされていない「ログアウト」ボタンが必要なためです)。
ユーザー名とパスワードのフィールドを「必須」に設定して、ユーザーがフィールドに空白の値を指定してフォームを送信しようとすると、AngularJS がツールチップを表示するようにしました。
<form name="loginForm" ng-submit="login()">
<fieldset>
<legend>Sign In</legend>
<label>Email</label>
<input name="loginEmail" type="text" placeholder="Registered email address…" ng-model="loginEmail" required>
<label>Password</label>
<input name="loginPassword" type="password" placeholder="Password…" ng-model="loginPassword" required>
<br/>
<button type="submit" class="btn">Login</button>
</fieldset>
</form>
この問題は、一部のブラウザー (少なくとも Firefox) が、ブラウザーにユーザー名とパスワードを記憶させ、次回は事前入力するかどうかを尋ねるときに発生します。
ブラウザーがこれらのフィールドのいずれかに入力すると、AngularJS は基本的に動作を停止します。「ng-submit」にバインドされたフォームは送信されません...バインドされたコントローラー関数はまったく呼び出されません。私が最初に考えたのは、事前入力されたフィールドがイベントをトリガーしなかったため、AngularJS はそれらがまだ空白であると考えているということでした。ただし、空白のフィールドについて警告するツールチップは表示されません。AngularJS が完全にシャットダウンしたようなものです。
奇妙なことに、いずれかのフィールドを手動で編集するとすぐに、AngularJS が復活します... 検証ツールチップとフォーム送信が再び機能し始めます。
ここにバグがありますか、それとも私の側の知識不足に問題がありますか? AngularJS にブラウザ入力フィールドを認識させるにはどうすればよいですか? または、この領域に問題がある場合、AngularJS に干渉しないように、ブラウザーがフィールドに事前入力しないようにするにはどうすればよいでしょうか?