19

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

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

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

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

ng-invalidライブ DOM から HTML をコピーすると、との両方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 Bootstrap Base CSS のFormsセクションの「Validation states」セクションで、errorクラスをコントロール グループ divに追加する必要があることがわかります。

<div class="control-group error">

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

4

2 に答える 2

9

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

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

/* Forms */
.ng-invalid.ng-dirty {
  border-color: red;
  outline-color: red;
}
.ng-valid.ng-dirty {
  border-color: green;
  outline-color: green;
}
于 2013-09-20T12:30:12.923 に答える