2017-09-28 8 views
3

bootstrap documentationによると、 following bootply markupには緑色と赤色の要素が含まれている必要がありますさらにinvalid-feedbackメッセージが表示されることを期待しています。ブートストラップ4検証クラスが入力/フィードバック要素に表示されていません

angle4の反応性のあるフォームに正しいスタイルを組み込みたいと考えています。

<form class="was-validated"> 
    <div class="form-group is-invalid"> 
     <div class="input-group mb-3"> 
      <span class="input-group-addon">@</span> 
      <input type="text" class="form-control is-invalid" placeholder="Email" formcontrolname="email"> 
     </div> 
     <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div> 
    </div> 

    <div class="form-group has-success"> 
     <div class="input-group mb-3"> 
      <span class="input-group-addon">@</span> 
      <input type="text" class="form-control" placeholder="Email" formcontrolname="email"> 
     </div> 
     <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div> 
    </div> 
</form> 

私は.is-invalidクラスを親を含むいくつかの要素に適用しました。私はこのためa bug loggedを発見した

編集

。 だからstackoverflowのの精神で、私は

答えて

1

を行ってきました...のは、すべての古いhas-*クラス、または余分な素晴らしいバグの周りの作品、それは角度だ場合4検証準備を元に戻すのどちらかという問題を回避する(css)の答えを受け入れることは非常に幸せですこの簡単なオプションで

/* validation and error display */ 
.invalid-feedback { 
    display: none; 
} 
.was-validated .invalid-feedback { 
    font-family: oxygen; 
    display: block; 
} 

show-errors ul { 
    margin: 0; 
    padding: 0; 

    li, li.invalid-feedback { 
     margin: 0; 
     padding: 0; 
     line-height: 1em; 
    } 
} 

show-errors + button { 
    margin-top:1em; 
} 
関連する問題