如何设置Twitter的引导类=错误基于AngularJS输入类= NG-无效？

问题描述

我在我的CSS没有采取（在Chrome）的影响问题，我想有一个与Twitter的引导一些冲突。

I have a problem where my CSS is not taking effect (in Chrome), and I think there is some conflict with Twitter Bootstrap.

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

我的模式是在我的控制器定义为：

My pattern is defined in my controller as:

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

和抄袭活DOM的HTML，我看到两个 NG-无效和 NG-无效图案设置，所以我的 NG-模式必须正常工作。

And copying the HTML from the live DOM, I see that both ng-invalid and ng-invalid-pattern are set, so my ng-pattern must be working.

<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的引导部分的部分基本的CSS，我看到我需要的错误类添加到控制组DIV。

I see that in the "Validation states" section of the Forms section of Twitter Bootstrap Base CSS, I see I need to add the error class to the control-group div.

<div class="control-group error">

问：如何设置类=误差根据孩子输入类= NG-无效？可这与纳克级的前pression的一些软做些什么呢？我可以在控制器通过code设置呢？有没有办法。$看之类的属性更改模式的评价？任何其他的想法，让我的红色轮廓？

Question: How to set the class=error based on the child input class=ng-invalid? Can this be done with some soft of ng-class expression? Can I set this via code in the controller? Is there a way to ".$watch" the pattern evaluation like property changes? Any other ideas to get my "red" outline?

推荐答案

您可以轻松地做到这一点与纳克级指令：

You can easily do it with ng-class directive:

<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>

修改

与引导3.3.5和1.4.2的角度举例：

Example with bootstrap 3.3.5 and 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>

<一个href=\"http://plnkr.co/edit/5JNCrY8yQmcnA9ysC7Vc?p=$p$pview\">http://plnkr.co/edit/5JNCrY8yQmcnA9ysC7Vc?p=$p$pview

这篇关于如何设置Twitter的引导类=错误基于AngularJS输入类= NG-无效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！