противоречивое поведение директивы для тега ввода в Angular 6 в iOS

Question

Я использую приведенный ниже код директивы только для ввода текста.

@Directive({
  selector: '[appTextOnly]'
})
export class TextOnlyDirective {
  private el: NgControl;

  constructor(private ngControl: NgControl) {
    this.el = ngControl;
  }

  // Listen for the input event to also handle copy and paste.
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
   // Use NgControl patchValue to prevent the issue on validation
   this.el.control.patchValue(value.replace(/[^A-Za-z]/g, ''));
  }
}

А ниже приведен код, в котором я использовал эту директиву.

   <input type="text" placeholder="First name" style="width: 16em;" 
     formControlName="firstNameEnglish"
                 required appTextOnly><br>

Он работает правильно в другом браузере, но при доступе через Safari на iOS он не отображается правильно, и предположим, что когда пользователь вводил «aa», он показывает «aaa», как это.

На другом входе, когда директива не установлена, она работает правильно. Я думаю, что это какая-то проблема с угловой стороны.

Заранее спасибо.