web-dev-qa-db-ja.com

Twitterを設定する方法Bootstrap class = error AngularJS input class = ng-invalid？

CSSが（Chromeで）有効になっていないという問題があり、Twitter Bootstrapとの競合があると思います。

input.ng-invalid {
    border-color: red;
    outline-color: red;
}

私のコントローラーでは、私のパターンは次のように定義されています。

$scope.hexPattern = /^[0-9A-Fa-f]+$/;

そして、ライブDOMからHTMLをコピーすると、ng-invalidとng-invalid-patternの両方が設定されているので、ng-patternが機能している必要があります。

<div class="control-group">
    <label class="control-label" for="salt">Salt: </label>
    <div class="controls">
        <input type="text" id="salt" ng-model="salt" ng-pattern="hexPattern" class="ng-dirty ng-invalid ng-invalid-pattern">
    </div>
</div>

Twitterの Forms セクションの「Validation states」セクションに、Bootstrap Base CSS、コントロールグループにerrorクラスを追加する必要があることがわかりますdiv。

<div class="control-group error">

質問：子入力class=errorに基づいてclass=ng-invalidを設定する方法これは、いくつかのソフトなngクラス式で実行できますか？これをコントローラーのコードで設定できますか？プロパティの変更のようなパターン評価を「。$ watch」する方法はありますか？ 「赤」のアウトラインを取得する他のアイデアはありますか？

javascripthtmlcsstwitter-bootstrapangularjs
19
Kevin Hakanson

ng-classディレクティブで簡単にできます：

<form name="myForm">
  <div class="control-group" ng-class="{ error: myForm.salt.$invalid }">
    <label class="control-label" for="salt">Salt: </label>
    <div class="controls">
      <input type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
    </div>
  </div>
</form>

http://plnkr.co/edit/RihsxA?p=preview

[〜＃〜] edit [〜＃〜]

bootstrap 3.3.5およびangular 1.4.2：

<form name="myForm">
  <div class="form-group" ng-class="{ 'has-error': myForm.salt.$invalid }">
    <label class="control-label" for="salt">Salt: </label>
    <input class="form-control" type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
  </div>
</form>

http://plnkr.co/edit/5JNCrY8yQmcnA9ysC7Vc?p=preview

41
Artem

より良い解決策は、独自のCSSルールを追加することだと思います。これにより、コードがはるかに単純になり、ボーナスとして、「ダーティ」要素にのみ適用されるようにルールを設定できます。これにより、ユーザーが何かを入力しようとした後にのみフィールドが強調表示されます。

私のアプリケーションでは、 AngularJSフォームのドキュメント の例に基づいて、このcssを追加しました。

/* Forms */
.ng-invalid.ng-dirty {
  border-color: red;
  outline-color: red;
}
.ng-valid.ng-dirty {
  border-color: green;
  outline-color: green;
}
9
kzar