I am trying to make the text capitalized when writing in the inputs, but this is not saved in the form control value.
<mat-form-field>
<input matInput formControlName="nombre" (keyup)="$event.target.value = $event.target.value.toUpperCase();">
</mat-form-field>
The result visible in the input is the desired one, but the value that the form control does not, any idea of how to also update the formcontrol value by using the event?
Since you are using formControlName , I assume you are using reactive forms .
Therefore you can observe the changes in the form and update it, changing to letters:
this.dataForm.controls.nombre.valueChanges.subscribe((value: string) => {
this.dataForm.controls.nombre.setValue(value.toUpperCase(), {emitEvent: false});
})
You can see an example working here .
Note: {emitEvent: false} is vital because without that detail we would fall into an infinite loop: changing the value of the formControl produces a valueChanges event, which would cause the subscription to act again.