web-dev-qa-db-ja.com

Bootstrap 4つの検証疑似クラス（：valid、：invalid）をAngular 5つのカスタム検証で使用する方法は？

ブートストラップ4の検証スタイルは、form-control:validまたはform-control:invalidに基づいています。 Angularは、フィールドにエラーがある場合にカスタムクラスを追加する可能性を提供します。

仕様に従っている場合： https://getbootstrap.com/docs/4.0/components/forms/#validation

.form-control.is-invalidクラスをinput要素に追加することもできます。ただし、この戦略でカスタムバリデーターを使用すると、マージされた結果が得られます。 form-control is-invalid :valid

これは、私の要素が有効であると表示される:validをより重要視しているようですが、関連するinvalid-feedbackは問題なく表示されています。

私はちょっと迷っています。

編集

デモプランカーは次のとおりです： https://plnkr.co/edit/0kxGpRz3JY3ixJbYqRZr?p=preview

angulartwitter-bootstrapbootstrap-4angular-validation
10
JSlain

あなたのデモは完全にうまく機能しています、ここでの問題はクラス名とスタイルだけです

formタグからwas-validatedクラスを削除し、次のように保持する必要があります。

class="needs-validation"

ワーキングデモ

5
Vivek Doshi