Estoy tratando de validar los campos de entrada usando el valor de ngControl en angular 2. Necesito validar que el usuario ingrese el valor en mayúsculas siempre.
Ahora necesitamos convertir el valor ingresado por el usuario a mayúsculas. Pero estoy manejando valores de campos de entrada usando ngControl, no ngModel (considerando que podría haber usado el evento ngModelChange para actualizar el valor a mayúsculas).
Entonces, ¿cuál es la mejor y más económica forma de convertir el valor utilizado por ngControl?
Como sugirió @Eric Martinez, puede crear una variable de plantilla local y vincular la cadena en mayúsculas a la propiedad de valor en el evento de entrada:
<input type="text" #input (input)="input.value=$event.target.value.toUpperCase()" />Alternativamente, puede hacer de esto una directiva:
@Directive({ selector: 'input[type=text]', host: { '(input)': 'ref.nativeElement.value=$event.target.value.toUpperCase()', } }) export class UpperCaseText { constructor(private ref: ElementRef) { } } Para usar la directiva, especifique UpperCaseText en la lista de directivas de su componente:
directives: [UpperCaseText]Aquí está mi solución:
Usar el host listener para escuchar el evento de entrada y luego forzarlo a mayúsculas.
import {Directive, EventEmitter, HostListener, Output} from '@angular/core'; @Directive({ selector: '[ngModel][uppercase]' }) export class UppercaseDirective { @Output() ngModelChange: EventEmitter<any> = new EventEmitter(); value: any; @HostListener('input', ['$event']) onInputChange($event) { this.value = $event.target.value.toUpperCase(); this.ngModelChange.emit(this.value); } }Con esta directiva, puede forzar fácilmente la entrada a mayúsculas de esta manera:
<input type="text" class="form-control" placeholder="ID" formControlName="id" [(ngModel)]="form.value.id" uppercase/><input type="text" oninput="this.value = this.value.toUpperCase()"> works good in angular to get every symbol to be a big one :)