Angular8:如何编写转换文本输入并将其应用于ngModel的指令

import { Directive, ElementRef, HostListener, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[appTransformInput]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TransformInputDirective),
      multi: true
    }
  ]
})
export class TransformInputDirective implements ControlValueAccessor {
  constructor(private el: ElementRef) {}

  // 将输入值转换为大写并更新ngModel的值
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    const transformedValue = value.toUpperCase();
    this.onChange(transformedValue);
  }

  // 实现ControlValueAccessor接口的方法
  writeValue(value: any): void {
    this.el.nativeElement.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {}

  private onChange: (value: any) => void = () => {};
}

<input type="text" [(ngModel)]="inputValue" appTransformInput>