Angular: cómo forzar mayúsculas en un campo de entrada

4 minutos de lectura

Avatar de usuario de Nobady
nadie

Estoy trabajando con angular (mecanografiado) y tengo un modelo en html donde el usuario debe insertar un campo de código y un campo de descripción.

El campo de código siempre debe ser ingresado por el usuario, siempre en mayúsculas.

Encontré y seguí esta pregunta: Cómo convertir el valor de entrada a mayúsculas en angular 2 (valor que pasa a ngControl)

pero la última letra que inserta el usuario sigue siendo minúscula sin embargo.. Lo fundamental es que la base de datos siempre viene en mayúsculas (también puse un límite de 4 caracteres que funciona correctamente) este es mi código ahora, pero como está escrito arriba. no trabaja adecuadamente:

<input type="text" id="code" #code class="form-control" formControlName="code" maxlength="4"
                 (input)="code.value=$event.target.value.toUpperCase()">

¿Alguien ha encontrado una solución rápida, funcional y rápida?

¡gracias!

  • Puede usar el evento onchange y convertir todo a mayúsculas.

    – Gruñón

    21 de mayo de 2018 a las 10:24

Simplemente puede agregar oninput="this.value = this.value.toUpperCase()" en tus <input> etiqueta y convertirá instantáneamente cualquier entrada en su campo de entrada a mayúsculas.

  • Sí, acabo de encontrar esta solución y la probé, ¡funciona correctamente! ¡gracias a todos!

    – Nadie

    21 de mayo de 2018 a las 10:49

  • (input)=”code.value=$event.target.value.toUpperCase()” no funciona correctamente. Escribe en mayúsculas todas las letras menos la última. @Ali gracias por tu solución. Trabaja apropiadamente.

    – D_Edet

    31 de julio de 2020 a las 8:53


  • ¡Atención! Esta solución tiene un efecto secundario. Cuando desee cambiar la entrada en el medio o al principio, el cursor saltará al final de la línea mientras escribe

    – El peor programador de todos

    24 de mayo a las 12:30

Avatar de usuario de DForsyth
DForsyth

Si estás trabajando con ngModelpuedes usar ngModelChange para hacerlo de esta manera con JavaScript .ToUpperCase().

<input [ngModel]="person.Name" (ngModelChange)="person.Name = $event.toUpperCase()">

Según la respuesta de @Ali Heikal, debería ser:

<input #code formControlName="code" (input)="code.value = code.value.toUpperCase()" type="text">

O usar .toLocaleUpperCase() si necesario.

  • Como señaló @D_Edet en otra respuesta, esto no pondrá en mayúscula la última letra directamente en el modelo, visualmente muestra todo en mayúscula, pero si verifica el valor del formulario asociado, no lo hará. El evento keyup con form.patchValue funciona gracias a Sampaguita.

    – le0diaz

    30 de septiembre de 2021 a las 3:45

Avatar de usuario de Sampaguita
Sampaguita

Esto funcionó para mí. Acabo de usar keyup y cada vez que un usuario agrega un carácter, lo convierte automáticamente a mayúsculas, no solo en la interfaz de usuario sino también en el modelo.

(keyup)="form.patchValue({name: $event.target.value.toUpperCase()})"

Puedes usar un pattern atributo para limitar la entrada permitida. También puede ayudar al usuario escribiendo en mayúsculas su entrada.

<input type="text" pattern="[A-Z]*" name="example" />

  • Según mis pruebas con este fragmento, el patrón no limita la entrada. En FF, simplemente marca un error al cambiar el cuadro de entrada a rojo. En Chrome, parece no tener ningún efecto.

    – Jeffry Houser

    6 sep 2018 a las 12:57

  • ¿Qué hay de hacer la primera letra mayúscula cuál es el patrón?

    –Ilia Tapia

    11 de mayo de 2019 a las 10:08

Avatar de usuario de movaction.com
movaction.com

Un poco tarde, pero me sorprende no ver la alternativa css.

Añadir en el campo de entrada:

.input-upper{
    text-transform: uppercase;
}

  • Según mis pruebas con este fragmento, el patrón no limita la entrada. En FF, simplemente marca un error al cambiar el cuadro de entrada a rojo. En Chrome, parece no tener ningún efecto.

    – Jeffry Houser

    6 sep 2018 a las 12:57

  • ¿Qué hay de hacer la primera letra mayúscula cuál es el patrón?

    –Ilia Tapia

    11 de mayo de 2019 a las 10:08

Puede crear una directiva angular que transforme todas las entradas del usuario en mayúsculas.

La Directiva amplía DefaultValueAccesor:

@Directive({
  selector: 'input[toUppercase]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => UpperCaseInputDirective),
    },
  ],
})
export class UpperCaseInputDirective extends DefaultValueAccessor {
  @HostListener('input', ['$event']) input($event: InputEvent) {
    const target = $event.target as HTMLInputElement;
    const start = target.selectionStart;

    target.value = target.value.toUpperCase();
    target.setSelectionRange(start, start);

    this.onChange(target.value);
  }

  constructor(renderer: Renderer2, elementRef: ElementRef) {
    super(renderer, elementRef, false);
  }
}

Use la Directiva de esta manera en la entrada:

<input name="myTdfInput" type="text" [(ngModel)]="value" toUppercase>

La solución funciona tanto en formularios reactivos como en formularios controlados por plantillas.

Vea la demostración de trabajo en Stackblitz: https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers-czivy3?file=src/app/to-uppercase.directive.ts

Los créditos de la solución van a: https://twitter.com/BartBurgov (Vea su tuit aquí: https://twitter.com/BartBurgov/status/1582394428748009477?s=20&t=RiefRcZ1B8IF42wp2rWzaQ)

¿Ha sido útil esta solución?