javascript - 如何根据条件和在触发任何验证之前强制输入大写？

Question

• 我正在使用Angular 8。
• 我想根据条件在字段上强制大写。当用户键入“Hi”之类的内容时，该值必须更改为“HI”。
• 我希望在触发验证之前应用这个大写字母（使用反应形式）。
• 我不想在触发验证后将输入值更新为大写，并在 .toUpperCase() 的验证中使用小写值，因为我有很多验证，而且我还有其他东西，比如应用了 Regexp 的“掩码”在输入字段上，我需要直接在输入值上强制大写。因此这是行不通的：

<input #input (input)="input.value=$event.target.value.toUpperCase()">

• 我找到了这个答案，这很好用：

<input oninput="this.value = this.value.toUpperCase()">

但不是我的用例，因为我不想复制我的 html 标签，因为我在这个字段上有很多配置，这会导致重复代码，我只能修改一个输入标签而不能修改另一个并引入错误。 ...因此，我不想使用这个：

<input *ngIf="uppercase" oninput="this.value = this.value.toUpperCase()">
<input *ngIf="!uppercase">

我会使用这样的东西（但这当然不起作用）：

<input oninput="if ({{this.uppercase}}) { this.value = this.value.toUpperCase();} ">

演示

标签： javascripthtmlangulartypescriptinput

Answer 1

经过多次测试，解决方案非常简单：

此解决方案不起作用，因为在更改之前触发了验证：

(input)="formBlock.forceUppercase ? input.value=$event.target.value.toUpperCase() : input.value=$event.target.value"

但这是有效的（在验证之前应用了更改）：

html:

(input)="forceUppercaseConditionally(formControl.formControlName, $event);"

ts：

forceUppercaseConditionally(formControlName, event) {
    if (this.uppercase) {
        this.formGroup.get(formControlName).setValue(event.target.value.toUpperCase()); 
    }
}