javascript - validate - ¿Cómo configurar la clase Bootstrap de Twitter=error basado en la clase de entrada AngularJS=ng-invalid?

formcontrol validators angular 6

Question

Tengo un problema donde mi CSS no está teniendo efecto (en Chrome), y creo que hay algún conflicto con Twitter Bootstrap.

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

Mi patrón se define en mi controlador como:

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

Y copiando el HTML del DOM en vivo, veo que tanto ng-invalid como ng-invalid-pattern están configurados, así que mi ng-pattern debe estar funcionando.

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

Veo que en la sección "Estados de validación" de la sección de Forms de Twitter Bootstrap Base CSS, veo que necesito agregar la clase de error a la división de grupo de control.

<div class="control-group error">

Pregunta: ¿Cómo establecer la class=error basado en la class=ng-invalid entrada secundaria class=ng-invalid ? ¿Se puede hacer esto con alguna expresión suave de ng-class? ¿Puedo configurar esto a través de código en el controlador? ¿Hay una manera de ". $ Ver" la evaluación de patrones como cambios de propiedad? ¿Alguna otra idea para obtener mi contorno "rojo"?

Answer 1

Creo que una mejor solución es simplemente agregar sus propias reglas de CSS. Hace que el código sea mucho más simple y, como beneficio adicional, puede establecer que la regla solo se aplique a elementos "sucios". De esa manera, los campos solo se resaltarán después de que el usuario haya intentado ingresar algo.

En mi solicitud, acabo de agregar este css, basado en un ejemplo en la documentación de formularios de AngularJS .

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

Answer 2

Puedes hacerlo fácilmente con la directiva 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

EDITAR

Ejemplo con bootstrap 3.3.5 y 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