Question

我有这样的指令，它处理onBlur / onFocus更改并将$符号添加到输入值的开头：

@Directive({
  selector: "[inputChanger]",
  host: {
    "(focus)": "onFocus($event)",
    "(blur)": "onBlur($event)"
  }
})
export class InputChangerDirective implements OnChanges {
  @Input("inputChanger") type: string;

  @Input() serverValue: string;

  constructor(private model: NgModel, private el: ElementRef) {}

  ngOnChanges(changes) {
    if (changes.serverValue && changes.serverValue.currentValue) {
      setTimeout(() => {
        this.el.nativeElement.dispatchEvent(new Event("blur"));
      });
    }
  }

  onFocus(element: any) {
    element.target.value = this.model.model || "";
  }

  onBlur(element: any) {
    if (Number(this.model.model)) {
      element.target.value = "$" + Number(this.model.model);
    }
  }
}

当我$输入或来自服务器的数据到来时，我需要以某种方式添加此blur。我做起来有些棘手...我添加了一个新输入serverValue，它等于服务器响应value并在指令中监听。

但是我认为这是一个不好的方法。

也许有更好的方法来填充输入，侦听ngModel的更改并将其格式化？

您可以在此处检查我的沙箱：https://codesandbox.io/s/18qlqny42q 清楚了解我要做什么...

Answer 1

您可以使用管道来格式化输入值。像这样

<input type="text" (ngModel)="model" [value]="text | pipe" />

Angular X指令：处理ngModel值更改的最佳方法

1 个答案: