如何在角度2中将输入值转换为大写(将值传递给ngControl)
如何在角度2中将输入值转换为大写(将值传递给ngControl)
提问于 2016-03-06 19:29:37
我正在尝试使用ngControl在angular 2中的值来验证输入字段。我需要验证用户总是以大写字母输入该值。
现在我们需要将user输入的值转换为大写。但是我使用ngControl而不是ngModel来处理输入字段中的值(考虑到我可以使用ngModelChange事件将值更新为大写)。
那么，转换ngControl使用的值的最佳且低成本的方法是什么呢？
回答 10
Stack Overflow用户
发布于 2016-03-07 00:43:50
正如@Eric Martinez建议的那样，您可以创建一个本地模板变量，并将大写字符串绑定到输入事件的value属性：
<input type="text" #input (input)="input.value=$event.target.value.toUpperCase()" />或者，您可以将其作为指令：
@Directive({
selector: 'input[type=text]',
host: {
'(input)': 'ref.nativeElement.value=$event.target.value.toUpperCase()',
}
})
export class UpperCaseText {
constructor(private ref: ElementRef) {
}
}要使用该指令，请在组件的指令列表中指定UpperCaseText：
directives: [UpperCaseText]Stack Overflow用户
发布于 2017-06-28 19:45:27
以下是我的解决方案：
使用主机侦听器侦听输入事件，然后将其强制为大写。
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);
}
}使用此指令，您可以轻松地将输入强制为大写，如下所示：
<input type="text" class="form-control" placeholder="ID"
formControlName="id" [(ngModel)]="form.value.id" uppercase/>Stack Overflow用户
发布于 2019-09-06 04:26:50
<input type="text" oninput="this.value = this.value.toUpperCase()">
works good in angular to get every symbol to be a big one :)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35826325
复制相关文章
相似问题
腾讯云开发者
