Ionic formatting input element onblur


#1

I am trying to format an input element onblur using the following directive

@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');
  }
}

the html is as follows:

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

The problem is that the input value is not being updated to the formatted value.

Thanks for helping,

Ashley