Question

我有以下几行代码。它基本上是我的html中的输入字段。我正在添加一个数字管道，因为它是一个货币字段。默认情况下它是空的，当用户为其添加值时，它应该将其自动形式化为货币。但我在这里得到一个罕见的问题。

vendor.dll.js：55094 EXCEPTION：无效的参数＆＃39; 8,888.038＆＃39; for pipe＆＃39; DecimalPipe＆＃39;

HTML：

<div class="form-input">
                    <cust-input
                            [ngModel]="Amnt | number:'.2-2'"
                            (ngModelChange)="Amnt=$event"
                            type="tel"
                            (keyup)="getAmount(RqstdAmnt)"
                            [ngClass]="{'inValid-requested-amount-class': AmountValid===false}"
                            placeholder="{{'amount_placeHolder' | translate}}">
                    </cust-input>
                </div>

TS：

RqstdAmnt:number;
getRequestedAmount(amount:number) {
        if (amount > somevalue) {
             console.log('value higher');
        } else {
             console.log('value lower');
        }
    }

我可以知道正确的做法是什么？当mouseout添加货币管道时，当用户点击输入字段无管道时，我们可以采用另一种方式。我不知道该怎么做。你们能指导我，我该怎么做？提前谢谢。

Answer 1

使用ngModel的管道并不是最好的主意，因为当用户键入管道时，每次按键都会运行。我已使用blur和focus实施了类似的方案。根据用户输入添加和删除.00，并且不会干扰交互。

如果你想在你的代码中使用它，这是代码：

HTML：

<md-input-container class="example-full-width">
    <input mdInput placeholder="Amount" 
           type="number" 
           [(ngModel)]="amount" 
           formControlName="amount" 
           (blur)="format(amount)" 
           (focus)="remove(amount)">
  </md-input-container>

TS：

format(amt){
    // console.log(amt % 1 == 0);
    if(amt % 1 == 0){
      amt = amt + '.00';
      this.amount = amt;
    }
  }

  remove(amt){
    // console.log(amt % 1 == 0);
    if(amt % 1 == 0){
      this.amount = amt * 1;;
    }
  }

  submit(form){
    alert(JSON.stringify(form));
  }

Plunker demo

数字管道给出字符串值而不是数字

1 个答案: