未在angular中应用自定义指令格式

我已经编写了自定义指令来格式化数字（例如：BE06377004247122） 至06 3700 0424 7122）。我不想更改模型值。因此，我将格式化的值分配给元素。与该控件交互后格式化的值。但一开始，情况并没有改变。值在afterviewinit中格式化，但未反映在控件中。

---

如果你想格式化一个字符串只显示它，而不改变它的值，考虑使用一个管道而不是一个指令。不，它是可编辑的<代码> >我不想改变模型值< /代码>。下定决心……不，我要说的是，它不应该改变模型值。这就是为什么我将格式化值指定给ElementRef.nativeElement.value。该值应存储在DB中，如BE06 3770 0424 7122，而不是BE06377004247122Sry，以防通信错误

@Directive({ selector: "[ibanFormatter]" })
export class IBANFormatterDirective implements AfterViewInit {

    private el: HTMLInputElement;
    private ibanPipe: FormatIBANAccountNumberPipe
    constructor(
        public model: NgModel,
        private elementRef: ElementRef,
    )
    {
        this.el = this.elementRef.nativeElement;
        this.ibanPipe = new FormatIBANAccountNumberPipe();
    }

    ngAfterViewInit() {
        this.el.value = this.ibanPipe.transform(this.model.model);
    }
@HostListener("focus", ["$event.target.value"])
    onFocus(value) {
        this.el.value = this.ibanPipe.parse(value); // opossite of transform
    }