将自定义指令应用于自定义窗体控件angular 6

Question

我们正在尝试实现自定义表单控件。我想应用大写形式的自定义指令，这意味着当我在文本框中输入文本时，它必须变为大写。

<smtextbox formControlName="xxxxxxx" [class]="'form-control'" pattern="/^\S*$/" [disabled]="xxxxxxDisabled" [id]="'externInput_xxxxx'" (onChangeVal)="changeInput(externInput)" (enter)="getdetails($event)" [placeholder]="''" uppercase></smtextbox>

我的指令：

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

@Directive({
  selector: '[appUppercase]'
})
export class UppercaseDirective {

    constructor(private smtext:smtextboxComponent) { }

    @HostListener('keyup') onkeyup() {
        this.smtext.value = this.smtext.value.toUpperCase(); 
    } 
}

在台式机上工作正常，但在移动设备上不。它将再次附加值。