大文字の入力フィールドへの指示

Question

すべての入力データを大文字に変換する指示文を使用したいと思います。それを達成するために、私はこのカスタムディレクティブを作成：

@Directive({ 
    selector: '[appToUpperCase]' 
}) 
export class ToUpperCaseDirective { 

    constructor() {} 

    @HostListener('input', ['$event']) onKeyUp(event) { 
    event.target['value'] = event.target['value'].toUpperCase(); 
    } 

} 

をそして、私はそのようにそれを使用します。

<form [formGroup]="formGroup" appToUpperCase> 

私は私のフィールドにテキストを入力するときには、そのexeptほとんど良い作品、大文字変換されパーマネントですが、フィールドの終わりにフォーカスが設定されています。事前入力を編集する場合、データの開始部分を変更するには、各Keyupイベントの後に適切な場所にフォーカスを設定する必要があります。 ..

どうすれば修正できますか？

Answer 1

基本的に命令コードから値を変更すると、カーソル位置の管理が難しくなります。値の入力値を書き換えると、入力の始めにカーソルが投げられます。

私はCSSの方法に行くことをお勧めしたいと思います。より洗練された

[my-attribute] input { text-transform: uppercase; } 

Answer 2

Pankajの考え方は、指令を作成するよりも優れています。 data.toUpperCase（）だけを送信する必要があります。とにかくこのような指示を使用したいならば。 preventDefault（）を使用する必要があるだけでなく、イベントの変更を送出する必要があることに注意してください。

import { Directive,HostListener } from '@angular/core'; 

@Directive({ 
    selector: '[appToUpperCase]' 
}) 
export class ToUpperCaseDirective { 

    constructor() { } 

    @HostListener('keydown', ['$event']) onKeyDown(event:KeyboardEvent) { 
    if (event.keyCode>32 && event.keyCode<128) 
    { 
     event.target['value']+=event.key.toUpperCase(); 
     event.preventDefault(); //stop propagation 
     //must create a "input" event, if not, there are no change in your value 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("input", false, true); 
     event.target.dispatchEvent(evt); 
    } 

    } 

}