title: Directive to upper case input fields
body: <p>I want to use a directive to transform all input data to uppercase. To achieve that, I create this custom directive :</p>
  
  <pre><code>@Directive({
    selector: '[appToUpperCase]'
  })
  export class ToUpperCaseDirective {
  
    constructor() {}
  
    @HostListener('input', ['$event']) onKeyUp(event) {
      event.target['value'] = event.target['value'].toUpperCase();
    }
  
  }
  </code></pre>
  
  <p>And I use it like that :</p>
  
  <pre><code>&lt;form [formGroup]="formGroup" appToUpperCase&gt;
  </code></pre>
  
  <p>It works almost good exept that when I enter text in my field, the upper case transform is permormed but the focus is set at the end of the field...So when I edit a pre filled input, if I want to modify the begining of the data, I have to set the focus at the right place after each Keyup event...</p>
  
  <p>How can I fix that ?</p>