离子格式化输入元素 onblur答案

【问题标题】：ionic formatting input element onblur离子格式化输入元素 onblur
【发布时间】：2017-10-17 07:20:44
【问题描述】：

我正在尝试使用以下指令格式化输入元素 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>

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

感谢您的帮助，

阿什利

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案1】：

尝试使用来自 ionic 的原生事件作为输入，一旦输入失去焦点就会触发。

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

在 Angular 中，

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

【讨论】：

【解决方案2】：

这对我有用。

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

【讨论】：