Как установить Twitter Bootstrap class= ошибка на основе AngularJS input class= ng-invalid?

У меня проблема, когда мой CSS не вступает в силу (в Chrome), и я думаю, что есть некоторый конфликт с Twitter Bootstrap.

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

Мой шаблон определен в моем контроллере как:

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

И скопировав HTML из живой DOM, я вижу, что установлены как 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>

Я вижу, что в разделе "Состояние достоверности" раздела Forms в базе Twitter Bootstrap Base CSS я вижу, что мне нужно добавить класс error к div группы управления.

<div class="control-group error">

Вопрос: Как установить class=error на основе дочернего ввода class=ng-invalid? Можно ли это сделать с помощью некоторого мягкого выражения ng-класса? Могу ли я установить это через код в контроллере? Есть ли способ "$ watch" оценить шаблон, как изменения свойств? Любые другие идеи, чтобы получить мой "красный" план?

Ответ 1

Вы можете легко сделать это с помощью директивы 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

ИЗМЕНИТЬ

Пример с загрузкой 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

Ответ 2

Я думаю, лучшее решение - просто добавить свои собственные правила CSS. Это делает код намного проще, и в качестве бонуса вы можете установить правило только для "грязных" элементов. Таким образом, поля будут выделены только после того, как пользователь попытается что-то ввести.

В моем приложении я только что добавил этот css на основе примера в документации по форматам AngularJS.

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