1

Estoy intentando que al escribir en los inputs el texto se convierta en mayúsculas, pero éste no se guarda en el valor del formcontrol.

<mat-form-field>
    <input matInput formControlName="nombre" (keyup)="$event.target.value = $event.target.value.toUpperCase();">
</mat-form-field>

El resultado visible en el input es el deseado, pero el valor que se guarda el formcontrol no, ¿alguna idea de como actualizar también el valor del formcontrol mediante utilizando el evento?

2
  • esto puedes hacerlo con css => input { text-transform: capitalize; }
    – LPZadkiel
    Commented el 12 dic. 2018 a las 18:13
  • @LPZadkiel con text-transform: uppercase en este caso, no se actualiza el valor del formcontrol, solo el valor visible del input Commented el 13 dic. 2018 a las 8:06

1 respuesta 1

1

Puesto que estás usando formControlName, asumo que estás usando reactive forms.

Por tanto puedes observar los cambios en el formulario y actualizarlo, pasando a maýusculas:

this.dataForm.controls.nombre.valueChanges.subscribe((value: string) => {
  this.dataForm.controls.nombre.setValue(value.toUpperCase(), {emitEvent: false});
})

Puedes ver un ejemplo funcionando aquí.

Nota: {emitEvent: false} es vital porque sin ese detalle caeríamos en un bucle infinito: al cambiar el valor del formControl se produce un evento valueChanges, que provocaría que la subscripción actuase de nuevo.

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.