Angular 6 反应形式输入值到大写

Question

我在 Angular 6 中使用 Reactive 表单。对于输入类型文本，我希望它是大写的。 我尝试了解决方案

(input)="form.patchValue({name: $event.target.value.toUpperCase()})"

该解决方案工作正常，但是当我将光标移动到中间并键入一个字符时，唯一的问题是光标移动到最后。

有没有其他方法或更好的解决方案？

Answer 1

为什么不直接使用 CSS 来完成这项工作？

 .uppercase{ text-transform: uppercase; }

 <input class="uppercase" type="text" placeholder="type here">

Answer 2

你可以试试这个：

const yourControl = this.form.get('yourControlName');
yourControl.valueChanges.subscribe(() => {
  yourControl.patchValue(yourControl.value.toUpperCase(), {emitEvent: false});
});

Answer 3

我知道这已经很晚了，但是...

您可以连接到 (change) 事件而不是 (input) 事件。 直到用户离开该字段后，您的案例更改才会执行，但它会阻止光标跳转。

如果用户在字段中按 Enter 提交表单，您的案例更改仍将执行。