ng-classがフォームの検証で認識されない

私はAngularJSを使用してフォームの検証を行っています。私はこのフィールドを持っている：usernameフィールドはdivタグはクラスとしてis-invalidを持っていることを空白になりますときにng-classを、使用してng-classがフォームの検証で認識されない

<body> 
    <div class="row"> 
     <div class="container"> 
      <h2 class="col-lg-6 col-lg-offset-5"> 
       Sign up<i class="fa fa-diamond" aria-hidden="true"></i> 
      </h2> 
     </div> 
    </div> 


    <form class="sa-innate-form" name="myForm" novalidate> 

     <label>Username</label> 
     <div ng-class="{'is-invalid' : myForm.username.$invalid}"> 
      <input type="text" name="username" ng-model="username" class="form-control" required /> 
      <span class="requiredLabel" ng-show="myForm.username.$invalid">required field!</span> 
     </div>

。

私はCSSで使用する場合：

<style> 
.is-invalid.form-control { 
     border: 2px solid red; 
} 
</style>

クラスがis-invalidあるときに名前username持つinputタグの境界線が赤でなければなりませんが、それは動作しません。

出典

2016-10-10 DistribuzioneGaussiana

フォーム要素を投稿できますか？ 'name =" myForm "'を持っていますか？ –

私は自分の質問を編集しました。 – DistribuzioneGaussiana

あなたが適用したCSSルールを使い慣れていません。 2つのクラスの間にスペースがあるはずです.is-invalid & .form-control（CSSルール内）は同じ要素に配置されていないためです。要素が同じ要素にある場合、それらの要素の間にはスペースがありません。

<style> 
.is-invalid .form-control { 
    border: 2px solid red; 
} 
</style>

出典

2016-10-10 10:46:13

それは私のために働いていません:( – DistribuzioneGaussiana

@DistribuzioneGaussianaそれは動作するはずです、あなたのコードから 'style'タグを削除すべきではありません、デモのために' style'要素を削除しました –

CSSに問題があるようです。 2つのクラス間のスペースにする必要があります。

<style> 
.is-invalid .form-control { 
     border: 2px solid red; 
} 
</style>

出典

2016-10-10 10:46:51

私は申し訳ありませんが、ボーダーは赤ではありません。 – DistribuzioneGaussiana

ng-classがフォームの検証で認識されない

答えて

関連する問題