как добиться ввода типа валюты в угловых 5? - PullRequest
Новая
       72

как добиться ввода типа валюты в угловых 5?

0 голосов
/ 28 января 2019

Я хочу, чтобы в моем приложении angular 5 произошло следующее.

У меня есть текстовое поле , где я ввожу числовые значения , как только фокус этого текстового поля теряется, введенные мной числовые значения должны быть отформатированы в валюта с '$' и ',', '.'символы.Как этого добиться?

Я хочу показать свои входные числовые значения, как показано на рисунке ниже.

enter image description here

Ответы [ 3 ]

0 голосов
/ 28 января 2019

Я нашел способ ..!Я установил пакет в своем приложении angular 5, которое предоставляет эту функциональность.

Я сделал это таким образом.

npm install currency-formatter --save

Код .html выглядит следующим образом: 

<input type="text" [(ngModel)]="taxableValue" (blur)="formatCurrency_TaxableValue($event)">
здесь, на размытом текстовом поле, которое я вызываю "formatCurrency_TaxableValue ($ event)" function.

Код файла .ts приведен ниже. 

formatCurrency_TaxableValue(event)
  {
    var uy = new Intl.NumberFormat('en-US',{style: 'currency', currency:'USD'}).format(event.target.value);
    this.tax = event.target.value;
    this.taxableValue = uy;
  }

так у меня получилось.

0 голосов
/ 28 января 2019

Здесь текстовое поле покажет, как вы ожидаете. 

<input name="money" type="text" value="{{amount | number :'1.2-2' | currency }}" [(ngModel)]="amount"/>
0 голосов
/ 28 января 2019

Здесь вам нужно CurrencyPipe преобразовать событие (размытие).

В вашем app.module.ts добавить CurrencyPipe провайдера. 

import { CommonModule, CurrencyPipe} from '@angular/common';
@NgModule({
  ... 
  providers: [CurrencyPipe]
})
export class AppModule { }

App.component.html

Событие привязки onblur событие к текстовому полю ввода. 

<h1>On Focus lost change Format amount</h1>
<input type="text"(blur)="transformAmount($event)" [(ngModel)]="formattedAmount"  />

В вашем App.component.ts методе записи в файл transformAmount($event)

AppComponent.ts 

import { Component,ElementRef } from '@angular/core';
import { CommonModule, CurrencyPipe} from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
 formattedAmount;
 amount;
   constructor(private currencyPipe : CurrencyPipe) {
  }

   transformAmount(element){
      this.formattedAmount = this.currencyPipe.transform(this.formattedAmount, '$');

      element.target.value = this.formattedAmount;
  }
}

См. это Демо

Надеюсь, что решение выше поможет вам!

...