javascript - validate - Angular está agregando automáticamente la clase ''ng-invalid'' en los campos ''requeridos''

validar input angularjs

Question

Estoy construyendo una aplicación angular para la cual tengo algunas formas configuradas. Tengo algunos campos que se deben rellenar antes del envío. Por lo tanto he añadido ''requerido'' en ellos:

<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>

Sin embargo, cuando inicio mi aplicación, los campos se muestran como "no válidos" y las clases "ng-invalid" y "ng-invalid-required" incluso antes de que se haga clic en el botón de envío o antes de que el usuario haya escrito algo en los campos.

¿Cómo puedo asegurarme de que estas 2 clases no se agreguen inmediatamente, pero una vez que el usuario haya enviado el formulario o cuando haya escrito algo incorrecto en el campo correspondiente?

Answer 1

Como las entradas están vacías y, por lo tanto, no son válidas cuando se crea una instancia, Angular agrega correctamente la clase ng-invalid .

Una regla de CSS que podrías probar:

input.ng-dirty.ng-invalid {
color: red
}

Lo que básicamente indica cuándo se ha ingresado algo en el campo en algún momento desde que la página se cargó y no se restableció en $scope.formName.setPristine(true) por $scope.formName.setPristine(true) y aún no se ingresó algo y no es válido, el texto gira red

Otras clases útiles para formas angulares (ver entrada para referencia futura )

ng-valid-maxlength - cuando pasa ng-maxlength
ng-valid-minlength - cuando pasa ng-minlength
ng-valid-pattern - cuando se pasa ng-pattern
ng-dirty : cuando se ha introducido algo en el formulario desde que se cargó el formulario
ng-pristine : cuando la entrada del formulario no tiene nada insertado desde que se cargó (o se restableció a través de setPristine(true) en el formulario)
ng-invalid : cuando falla alguna validación ( required , minlength , personalizada, etc.)

Del mismo modo, también hay ng-invalid-<name> para todos estos patrones y los personalizados creados.

Answer 2

Como los campos están vacíos, no son válidos, por lo que las clases ng-invalid y ng-invalid-required se agregan correctamente.

Puede usar la clase ng-pristine para verificar si los campos ya se han usado o no.

Answer 3

Gracias a esta publicación, utilizo este estilo para eliminar el borde rojo que aparece automáticamente con bootstrap cuando se muestra un campo requerido, pero el usuario no tuvo la oportunidad de ingresar nada ya:

input.ng-pristine.ng-invalid {
-webkit-box-shadow: none;
-ms-box-shadow: none;
box-shadow:none;
}

Answer 4

Intente agregar la clase para validación dinámicamente, cuando el formulario se haya enviado o el campo no sea válido. Use el nombre del formulario y agregue el atributo ''nombre'' a la entrada. Ejemplo con Bootstrap:

<div class="form-group" ng-class="{''has-error'': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
<label class="col-sm-2 control-label" for="username">Username*</label>
<div class="col-sm-10 col-md-9">
<input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
</div>
</div>

También es importante que su formulario tenga el atributo ng-submit = "":

<form name="myForm" ng-submit="checkSubmit()" novalidate>
<!-- input fields here -->
....
<button type="submit">Submit</button>
</form>

También puede agregar una función opcional para la validación del formulario:

//within your controller (some extras...)
$scope.checkSubmit = function () {
if ($scope.myForm.$valid) {
alert(''All good...''); //next step!
}
else {
alert(''Not all fields valid! Do something...'');
}
}

Ahora, cuando cargue su aplicación, la clase ''has-error'' solo se agregará cuando se envíe el formulario o se haya tocado el campo. En lugar de:
! myForm.username. $ pristine

También podrías usar:
myForm.username. $ dirty

Answer 5

la respuesta aceptada es correcta ... para dispositivos móviles también puede usar esto (ng-touch en lugar de ng-dirty)

input.ng-invalid.ng-touched{
border-bottom: 1px solid #e74c3c !important;
}