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 提交表單，您的案例更改仍將執行。