Angular.js: バグ：Firefox：「必須」の入力フィールドは送信前に赤い影/境界線を取得します

角度の問題ではなく、Firefoxの問題だとは思いません。
http://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline

@timjacobi ：あなたのリンクは赤い影を_完全に_無効にすることに適用されます（つまり、フォームの送信後も）。 私が見つけた唯一の（一種の）関連する議論はここにあります： http ：

私の提案：ユーザーがフォームを送信したらすぐにクラスng-submitted （または同様のもの）を適用します。

理由：他の場所にフォーカスせずに送信ボタンをクリックしても、ng-classesはまったく変更されません。 したがって、ステータス「フォームがレンダリングされたばかり」とステータス「ユーザーがすでに送信しようとしました」はCSSで区別できません。そのため、このようなすべての回避策は実際には機能しません。
.ng-untouched.ng-invalid-required { box-shadow:none; }

（ novalidateが設定されていない、つまりブラウザの内部検証を維持している状況について話しています。）

ネイティブブラウザの検証を無効にする必要があります。 例えば。 <form novalidate>

さあ、それはどのような答えですか？
また、すべてのユーザーにFirefoxを使用しないように指示することもできます......

さて、真剣に、ネイティブブラウザの検証を無効にすることはAngularJSの公式の_システム要件_ですか？ ただのオススメだと思いましたか？

私の意見では、ネイティブブラウザの検証を維持する正当な理由があります。たとえば、エラーメッセージのデザインやスタイル設定に煩わされる必要はありません。 AngularJSは、プログラマーの作業を_増やす_のではなく、_減らす_プログラマーの作業に昇格します（ホームページから：「コードを減らして、ビールを早く飲みましょう。」）。 したがって、これを修正しない場合は、確かに「さらにコードを書く」場合です。

もう一度開いてください。

@ThomasLandauer私はあなたに何をすべきか、何をすべきでないかを教えようとはしていません。 これがAngularアプリでなくても、Firefoxの入力フィールドにrequireを入力すると、同じ赤い境界線が表示されます。 問題は、なぜこれがAngularの問題であり、ここで開かれるのかということです。 あなたの例でAngularに固有のものは何ですか？

これを開いて、このFirefoxの制限を回避できるかどうか試してみましょう

上で説明したように：赤い境界線は、すべての_three_条件が満たされた場合（つまり、AngularJSがアクティブな場合）にのみ存在します：フィドルをチェックして、 ng-modelを削除し、リロードします（F5が機能しない場合があり、Ctrl + F5が必要です） =>赤い境界線がなくなりました！ したがって、これはAngularの問題です。

@ThomasLandauerこれはFirefoxの問題です

この動作をトリガーするためにAngularが必要であるという事実は、Angularなしで同じ動作をトリガーできるため、これがAngularの問題であることを意味するものではありません。

まだ疑問ですか？ Angularを使用しないフィドルを更新しました。
https://jsfiddle.net/5yh58orm/14/

https://jsfiddle.net/5yh58orm/17/は、 @ timjacobiが投稿した例と同等ですが、これがFirefoxの問題であることを明確に示しています

私の提案：ユーザーがフォームを送信したらすぐに、クラスng-submitted（または同様のもの）を適用します。

FWIW、 ng-submittedクラスが_IS_あり、送信されるとフォームに適用されるため、入力のスタイルを設定するために使用できます。

@lgalfaso ：私はそれをFirefoxの問題とは呼びませんが、FirefoxとAnulgarの間の_非互換性_です;-)しかし、とにかく、他の問題を開いてくれてありがとう!! :-)

@gkalpak ：ええ、ありがとう、その間に気づきました;-)ng-submittedは、フォームが_実際に_送信された後（つまり、検証と強調表示が明らかに廃止された時点）にのみ適用されます。 ユーザーが送信に失敗した瞬間について話しています。 Angularがクラスを設定できればいいのですが、より適切なクラス名はおそらくng-unsuccessful-submitでしょう。

@ThomasLandauer 、送信が失敗したことを示すクラスを追加することの意味がわかります。

しかし、これは広く使用されている/必要なオプションではないと思います。 何人かの人々が、あらゆる種類のイベント（フォーカスなど）を示すために、 ngModelController / formControllerによって異なるクラスを追加するように要求していることに注意してください。
Angularは、一般的に役立つと考えられるもの（ ng-dirty / ng-pristine 、 ng-touched / ng-untouched 、 ng-submitted ）を実装していますが、すべてのユースケースをカバーしようとして、あまりにも多くのクラスを追加することは意味がありません。

とはいえ、コアの外部に追加機能を実装するのは非常に簡単です。

確かに、_everything_のクラスを追加することはできません;-)

しかし、一般的に、私は自分で設計したものよりもネイティブブラウザ機能を好みます。これは、ユーザーエクスペリエンスが向上するためです。 この場合：Firefoxのネイティブの赤い影とポップアップのツールチップはユーザーにはなじみがあり（おそらく100回前に見たことがあるため）、私のデザインはユーザーにとって新しいものです。

とにかく問題はファイルにあるので、誰かがそれを望んでいるなら、コメントを残してください。 そして、私だけなら、それを忘れてください;-)

これに取り組んでくれてありがとう！ これは、テキスト領域を除くすべての入力フィールドで機能するようになりました。 あなたもそれを修正できますか？

[編集]このCSSスタイルをすべてのテキスト領域フィールドに定義することで、これを一時的に修正しました。
ボックスシャドウ：なし

@eyahlin 、この問題はクローズされているので、新しい問題を開いてください（関連する場合はこれを参照してください）。 また、問題のライブデモを提供すると、非常に役立ちます：smiley：

どうも！

Angularの外部で経験したFirefoxのバグレポートを送信しました。
https://bugzilla.mozilla.org/show_bug.cgi?id=1399046

角度2のprimengについても同じことが言えます。ポイントは、強力なprimengクラスを圧倒するために、1つまたは必要に応じて2、3つのクラスに配置されます。 彼らがいくつかのprimengクラスを置いた後に自己クラスの2つを置きます
.overwriteclass .overwriteclass2 .ng-valid [required] 、. ng-valid.required {
ボーダー：1pxソリッド＃e1ea06！重要;
ボックスシャドウ：0 0 3px＃e1ea06 ！;
}

これがAngularの外にあることを確認しました。私は、ReactとMaterial-UI（Formsy経由）で使用しています。

これを回避しようとしている他の人は、デフォルトのFirefoxブラウザのスタイルを上書きできます。

：-moz-ui- invalid：not （output）{
ボックスシャドウ：なし;
}

（明らかに、出力要素にないことはオプションです）。

<form novalidate ...> ... </form> include novalidate otherwise you have to manually reset form. Such as using jquey $('.your-form-class').trigger("reset");