Question

我有一个HTML输入：

<input [(ngModel)]="item.value" name="inputField" type="text" />

我想格式化它的值并使用现有的管道：

.... [(ngModel)]="item.value | currency:'USD':true" .....

此外，我正试图以下列方式使用它，但它第一次给了我理想的输出并在更新字段时显示错误：

<input type="text" 
   [ngModel]="item.value | currency:'USD':true" 
   (ngModelChange)="item.value=($event)">

上述代码会导致以下错误。

错误错误：InvalidPipeArgument：''用于管道'CurrencyPipe'       在invalidPipeArgumentError（common.es5.js：2610）
      at formatNumber（common.es5.js：3176）
      在CurrencyPipe.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.CurrencyPipe.transform(common.es5.js:3350)
      在LandingPageComponent.webpackJsonp ... / .. / .. / .. / .. / src / app / guest-handling / landing-page / landing-page.component.ts.LandingPageComponent.transformAmount（landing-page.component。 TS：54）
      在Object.eval [as handleEvent]（LandingPageComponent.html：38）
      在handleEvent（core.es5.js：12014）
      at callWithDebugContext（core.es5.js：13475）
      at Object.debugHandleEvent [as handleEvent]（core.es5.js：13063）
      at dispatchEvent（core.es5.js：8607）
      在core.es5.js：9218

Answer 1

以下是使用货币管道的正常工作：

<input matInput type="text" placeholder="Test Price" [ngModel]="testPrice | currency:'USD':'symbol':'2.2'" [ngModelOptions]="{updateOn:'blur'}" 
      (ngModelChange)="testPrice=$event"/>

基本上使用ngModelOptions更新模糊允许在输入字段中输入时不添加0。

Answer 2

我认为这是一个解决方案：

def onOut():
    return TestEnvironment.__dict__['_on_out']

然后在你的控制器中。输入值中的货币标记：

<input type="text" 
   [ngModel]="item.value | currency:'USD':true" 
   (ngModelChange)="item.value=currencyInputChanged($event)">

Answer 3

我认为您需要将一些答案与这样的小改动结合起来 -

HTML：

<input
  matInput 
  type="text"
  placeholder="Test Price"
  [ngModel]="testPrice | currency:'USD'"
  [ngModelOptions]="{updateOn:'blur'}"
  (ngModelChange)="updateCurrencyField($event)"
/>

TS：

updateCurrencyField(value: string): void {
  const onlyNumbers = value.replace(/[^\d.-]/g, '');
  this.valueChange.emit(Number(onlyNumbers));
}

Angular 4 - 如何在输入类型

3 个答案: