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

尝试使用来自离子的本机事件进行输入，一旦输入失去焦点就会触发。

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

在Angular中，

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

Answer 2

这对我有用。

<ion-input type="text" (ionBlur)="onBlur()">

离子格式化输入元素onblur

2 个答案: