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

Question

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

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

• 我找到了 this answer这很好用:

<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();} ">

Demo

Answer 1

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

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

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

但是这是有效的(更改在验证之前应用):

html:

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

:

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