angular - ionic 格式输入元素 onblur

Question

我正在尝试使用以下指令格式化输入元素 onblur

@Directive({
  selector: '[formatnumbercomma]' // Attribute selector
})
export class FormatNumberCommaDirective {

  private e1: HTMLInputElement;
  numberPipe = new DecimalPipe('en-US');

  constructor(private elementRef: ElementRef) {
    this.e1 = this.elementRef.nativeElement;
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.e1.value = this.numberPipe.transform(value, '.0-0');
  }
}

html如下:

<ion-input class="input-panel-2" 
          type="number" 
          name="a"
          required
          formatnumbercomma
          [(ngModel)]="amount" 
          (ngModelChange)="computeX($event)"
          #pVar="ngModel">
</ion-input>

问题是输入值没有更新为格式化值。

感谢您的帮助，

阿什利

Answer 1

尝试使用 ionic 的 native 事件进行输入，一旦输入失去焦点，该事件就会触发。

<ion-input type="text" formControlName="name" (focusout)="onBlur()"></ion-input>

在 Angular 中，

onBlur(){
   alert("input lost focus");
}