如何在角度 2 中将输入值转换为大写（传递给 ngControl 的值）

Question

我正在尝试使用 ngControl 在角度 2 中的值来验证输入字段。我需要验证用户是否始终以大写字母输入值。

现在我们需要将用户输入的值转换为大写。但我正在使用 ngControl 处理来自输入字段的值，而不是 ngModel（考虑到我可以使用 ngModelChange 事件将值更新为大写。）

那么转换ngControl使用的值的最佳且低成本的方法是什么。

原文由 ankitkamboj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如@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]

演示插件

原文由 pixelbits 发布，翻译遵循 CC BY-SA 3.0 许可协议