0

¿Es posible cambiar el borde del input cuando se está escribiendo y mostrar el borde rojo si tiene un error o verde si es correcto?; teniendo en cuenta que estoy dentro del input ósea en focus del elemento html

Html

<hello name="{{ name }}"></hello>
<input type="text" 
       [(ngModel)]="name" 
       [ngClass]="{'correct': name.length > 0,'error': name.length === 0}"
>

** Css **

.correct {
  border: 1px solid greenyellow;
}

.error {
  border: 1px solid red;
}

** Typescript **

export class AppComponent  {
  name = 'Angular';
}

demo

2 respuestas 2

2

Angular agrega clases de estado como: ng-invalid y ng-valid a los input.

En tu caso puedes hacer esto:

Agregar en el archivo.css

/* remover el outline para que es ve el color del estado */
input:focus {
  outline: unset;
}
/* agregar borde rojo a los input que estén en estado inválido */
.ng-invalid {
  border: 1px solid red;
}
.ng-valid{
  border:  1px solid green;
}

El en html agregar el atributo required al input para probar con esa validación:

<input type="text" [(ngModel)]="name" required>

Demo

Referencia

1

Si es solo en la pseudo-clase :focus, puedes hacer esto:

.correct:focus {
  outline: unset;
  border: 1px solid greenyellow;
}

.error:focus {
  outline: unset;
  border: 1px solid red;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.