1

Realizando unas validaciones en un formulario utilizando Angular para el front y bootstrap para aplicar estilos rápidos, me topé con una situación de querer aplicar cambios usando ngClass en el elemento HTML correspondiente, en este caso en inputs, realice de dos formas, una queda de manera correcta, pero afecta de forma síncrona a todos los inputs, mientras que una segunda forma que realice, funciona solo afectando al que está siendo modificado, pero no cambia las clases de manera correcta.

Forma 1

Creo una función que cambio el valor de la variable acorde a lo que esté en el input

Archivo html


<div class="form-group mt-2">
  <input type="text" class="form-control" placeholder="Cedula" formControlName="Cedula" (input) = isEmpty($event)" [className]="!this.boxState ? 'form-control is-invalid' : 'form-control border border-secondary'">
</div>

Archivo TS

boxState: boolean = true

isEmpty(event: any){     

    if(event.target.value === ""){
        this.boxState = false
      }else{
        this.boxState = true
      } 

    })
}

Forma 2

Se me ocurrió que, pasando el nombre del control, en este caso, el formControlName así sabría cuál está siendo afectado, crear un objeto con los mismos nombres de los controles, luego hacer un proceso de comparar nombres, y cambiar el valor booleano acorde al nombre del control que esté cambiando.

Archivo html


<div class="form-group mt-2">
  <input type="text" class="form-control" placeholder="Cedula" formControlName="Cedula" (input) = isEmpty($event)" [className]="!this.boxState[1] ? 'form-control is-invalid' : 'form-control border border-secondary'">
</div>

Archivo TS


boxState2: any = {
    Cedula: true,
    Nombre: true,
    Apellido: true,
    Telefono: true,
    Fecha_N: true,
    email: true
  }

isEmpty(event: any){

    let controlName = event.target.getAttribute('formControlName')
    let box = Object.entries(this.boxState2)

    box.forEach(box => {    

    if(event.target.value === ""){
        let position = box.indexOf(controlName)
        if(position === 0){
          box[0+1] = false
        }   
      }else{
        let position = box.indexOf(controlName)
        if(position === 0){
          box[0+1] = true
        } 
      } 

    })
    
    this.boxState = box    
  }

Los valores del que arroja console.log son los siguientes

Cuando presiono cualquier valor en el input del campo cédula ocurre esto

El valor de Cédula, es el nombre del control del input, y el array, es el objeto que cree en el fichero TS que lo convierto de esa forma para poderlo recorrer

Controlname - object.entries

Resultado del vector presionando un valor

Presionando un valor

Eliminando cualquier valor del campo y dejándolo vacío, pueden comparar la posición cero, como cambio de true a false

sin valor alguno

1 respuesta 1

1

Esto seria mi solución, siguiendo un poco tu lógica de el segundo ejemplo.

Lo primero que no entiendo si tienes un objeto donde defines tus propiedades por que las asignas a boxstate, ya que se sobrescribirá en un segundo input cuando ingresen valores.

Lo que yo haría en tu caso, afecto directamente a boxstate2, en la propiedad que venga dentro de el target en formControlName.

Y dentro de el Html, accedo a boxstate2 en la propiedad que le corresponde según el input.

Archivo html

<input
        type="text"
        class="form-control"
        placeholder="Cedula"
        formControlName="Cedula"
        (input)="isEmpty($event)"
        [className]="!this.boxState2.Cedula ? 'form-control is-invalid' : 'form-control border border-secondary'"
      />

Archivo TS

isEmpty(event: any) {
    let controlName = event.target.getAttribute("formControlName");

    if (event.target.value === "") {
      this.boxState2[controlName] = false;
    } else {
      this.boxState2[controlName] = true;
    }
  }

Te dejo un ejemplo funcional.

https://codesandbox.io/s/relaxed-lichterman-14gwl?file=/src/app/app.component.ts

2

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.