反应形式 Angular 格式输入数据答案

【问题标题】：Reactive forms Angular format input data反应形式 Angular 格式输入数据
【发布时间】：2019-04-08 18:04:52
【问题描述】：

您好，我是 Angular Reactive 表单的新手，一直在努力解决这个问题。

我要做的是将输入数据格式化为大写：/

<input #stateInput matInput type="text" 
formControlName="state" 
[matAutocomplete]="autoState" maxlength="2"
(keyup)="stateInput.value.toUpperCase()" 
required>

我无法让它工作？

感谢任何帮助

谢谢

【问题讨论】：

我喜欢使用<input style="text-transform:uppercase"> 并提交转换变量。如果您在输入的中间输入，则必须考虑另一种方式

标签： javascript angular forms

【解决方案1】：

要达到预期效果，请使用以下选项

问题：将输入值更改为大写后，必须重新分配以显示在输入字段中

<input
    type="text"
    [formControl]="state"
    #stateInput
    (keyup)="stateInput.value = stateInput.value.toUpperCase()"
  />

代码沙箱供参考 - https://codesandbox.io/s/6l9nk4k2zn

【讨论】：

您的代码的问题是当您尝试在输入中间键入时
@Eliseo，根据 SO question，这种情况是不可能的，因为 maxlength 只有两个
::glups:: 我没有看到这个细节
@Eliseo，我只是尝试在输入中间键入，它按预期工作 - codesandbox.io/s/0pwrknw97l .. 这适用于那种情况，因为我将完整的输入值更改为大写而不是基于位置:)
当我输入“abde”时，我将光标放在 b 和 d 之间并输入 c（形成“abcde”，光标会移到输入的末尾。因此，如果你写html {{state.value}}，你可以看到这个值不是上限。如果你把 maxlength="2" 输入 ab，先去 yo，去掉 "a" 并输入 C，光标会去也到最后

【解决方案2】：

您可以简单地使用下面的代码，它会立即将输入转换为大写，

oninput="this.value = this.value.toUpperCase()"

这是一个例子Example

【讨论】：