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

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

演示

Answer 1

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

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

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

但这正在工作（在验证之前应用了更改）：

html :

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

：

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