指令将 ng-model 输入值显示为角度货币 [英] Directive display ng-model input value as currency in angular

问题描述

我想在我的输入字段中显示带有十进制值的货币符号.如果模型值设置为 2，它应该显示 $2.00 而模型值应该保持数字.我创建了一个这样做的指令，但是如果从服务器加载值，其中值在模型中设置，那么它显示 $2.00 并且模型值也是字符串，而我需要数字.在谷歌搜索许多帖子后，我找到了这个 soln 但它是有角度的1.它如何转换为角度2?我需要完全相同的行为:Fiddle

I want to display Currency sign with decimal value in my input field. If model value is set to 2 it should display $ 2.00 while model value should remain numeric. I have created a directive that do so but if load value from server where value is set in model then it display $ 2.00 and model value is also string while i need numeric.After googling many posts i have found this soln but it is in angular 1. How it can be converted in angular 2? I need exactly same behavior: Fiddle

我的指令是:

    import { Directive,Renderer,ElementRef,OnInit,Input,Output,EventEmitter,HostListener} from '@angular/core';
import {NgModel} from '@angular/forms';
declare var $: any;
@Directive({
  selector: '[appUiCurrencFormatter]',
  providers: [NgModel],
  host: {
    '(ngModelChange)' : 'onInputChange($event)'
  }
})
export class UiCurrencFormatterDirective implements OnInit {
  private currencyPrefix : string;
  private el: HTMLInputElement;
   @Input() ngModel;
   @Output() ngModelChange = new EventEmitter();
   constructor(public elementRef: ElementRef,public model:NgModel) {
     this.currencyPrefix= "£ ";
     this.el = this.elementRef.nativeElement;
  }
  ngOnInit() {
     let v= this.roundN(this.ngModel,2);
     this.model.control.setValue(v);
     this.model.valueAccessor.writeValue(this.currencyPrefix + v);
     this.ngModelChange.emit(this.currencyPrefix + v);
  }

  roundN(num, n) {
    return (Math.round(num * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
  }

  onInputChange(newValue: any):Number {
    debugger;
    return <Number>newValue;
  }
  @HostListener('keydown', ['$event'])
  keyDownEvent(event: KeyboardEvent) {
    if (event.key.length === 1 && (event.which < 48 || (event.which > 57 && event.which<96) || (event.which>106 && event.which!=110)))
    {
      event.preventDefault();
    }
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    var plainNumber = value.replace(/[^\d|\-+|\.+]/g, '');
    let v= this.roundN(plainNumber,2);
    this.model.control.setValue(v);
    this.model.valueAccessor.writeValue(this.currencyPrefix + v);
  }
}

推荐答案

阅读这篇文章后 应用Angular2 ngModel 后格式化输入值我已将解决方案应用于我的指令，几乎没有变化，它对我有用

After reading this post Format input value after Angular2 ngModel is applied I have applied solution to my directive with little change and it works for me

ngAfterViewInit() {
 this.model.valueChanges.subscribe(value => {
   if(this.counter==1) { //Should call only once not everytime value changes
     let v= this.roundN(value,2);
     this.model.valueAccessor.writeValue(this.currencyPrefix + v);
   }
   this.counter++;
 })

}

这里的 Counter 是私有变量，在指令的 ngOnInit 事件中初始化

Here Counter is private variable and initilize in ngOnInit event of directive

这篇关于指令将 ng-model 输入值显示为角度货币的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！