web-dev-qa-db-ja.com

angular8でエラーメッセージを受け取った後に金額を通貨パイプ値に変換する方法

ぼかしイベントで通貨パイプを使用しています。しかし、検証のエラーメッセージが表示されたときに初めて正常に機能します。いくつかの数値を削除して表示された場合、通貨フォーマットにフォーマットされず、ユーザーが削除したフォーマットのままになります。たとえば、次の番号を指定しました：36543265入力から出たとき、検証エラーメッセージとともに$36,543,265.00にフォーマットされます。そのため、265.00から$36,543,265.00を削除しても、エラー検証メッセージが引き続き表示されます。そのため、検証エラーメッセージが表示され、この形式$36,543のままでしたが、適切な形式になりませんでした。検証メッセージを消去した後、USDの適切な通貨パイプ形式にする方法を教えてください。

ユーザーによる値の削除に基づいて適切にフォーマットされるようにするにはどうすればよいですか？.

TS：

public transformAmount(element, name) {
  if (name == "amount") {
    let formattedAmount = this.currencyPipe.transform(this.eoInfoForm.value.amount, 'USD');
    element.target.value = formattedAmount;
    this.eoInfoForm.get('amount').setValue(formattedAmount);
    if (this.eoInfoForm.get('amount').status === 'VALID') {
      this.amt = false; 
    } 
    else {
      this.amt = true;
    } 
  } 
}

HTML：

 <input type="text" class="form-control" placeholder="Amount in dolars"
                    formControlName="amount" autocomplete="off" maxlength="8" allowNumberOnly (blur)="transformAmount($event,'amount')" [ngClass]="{ 'is-invalid': amt  && eoInfo.amount.invalid }">
                    <div *ngIf="amt && eoInfo.amount.invalid" class="invalid-feedback">
                        <div *ngIf="amt && eoInfo.amount.invalid">Maximum of 8 characters including $ is allowed</div>
                      </div>

デモ： [〜＃〜] demo [〜＃〜]

angularcurrency-pipe
5
Bhrungarajni

$記号を挿入すると、コードにエラーが発生します enter image description here

この正規表現を使用して、テキストから数値のみを取得できます

var thenum = thestring.replace( /^\D+/g, ''); // replace all leading non-digits with nothing

または、最初の文字を確認し、それが$の場合は削除します

0
Oded BD

それを機能させるために、コードのいくつかを変更しました： Working solution

ここに主要な部分があります：

public transformAmount(name) {
    let formattedAmount = this.currencyPipe.transform(
        this.eoInfoForm.value.amount.replace(/[^\d.E+]/gm, ""),
        "USD"
    );
    this.eoInfoForm.get(name).setValue(formattedAmount);
}

私がやったことは、パイプに再度渡す前に、値のパイプ変換を反転することです。 /[^\d.E+]/gm正規表現を使用して、に含まれていないものをすべて削除しました。

  • 数
  • ドット文字
  • 「E」の文字
  • 「+」文字

「E」と「+」は、数値が非常に大きく、$1.00E+37のように表示される特定のケースを処理するためのものです。

テキストがフォーマットされている場合は、最大長の8が適用されると想定していたので、触れませんでした（それ以外の場合は、カスタムバリデーターが必要です）。 TypeFormファイルに移動したのは、リアクティブフォームを使用しているため、テンプレートフォームの概念を混在させない方が良いからです。

0
Guerric P

最初に指摘したいこと：

maxlength="8"を使用します。通貨パイプを使い始めるまでは問題ありません。通貨パイプによって追加された文字が考慮されます。それが望ましい動作かどうかはわかりませんが、ユーザーの観点からは直感的ではありません。

「最大8文字まで入力できます。最大8文字まで入力できます」-検証メッセージを読むときに最初に考えたいことです。 （その時点で）フォーマットされていない数値を入力している間、自分で通貨のフォーマットを考える必要はありません。

私はmaxLength 14（8 + 1ドル記号+ 2カンマ+ 1ドット+ 2桁はUSD = 14文字の可能な最大数です）を作成し、検証メッセージを値8のままにすることを言います。または、フォーマット後に実際に8文字しか必要ない場合は、検証メッセージの値を3（3 + 1ドル記号+ 1カンマ+ 1ドット+ 2桁= 7）にして、4桁にすると、フォーマット後に9文字になります。コンマが追加され、maxLength 8を超える9文字になります。

ジェネリック*ngIf="amt && eoInfo.amount.invalid"に依存する代わりに、長さのカスタム検証を使用して、適切に自分自身をチェックすることもできます（これは、通貨形式が異なる場合に適しています）。

ここであなたの実際の問題について、私が素晴らしいと思う解決策は、編集中にフォーマットを削除することです。ユーザーが編集して.,と$をナビゲートする必要があるのは、編集するときに本当に重要なのは数字だけである場合、実際には決して現実的ではありません。ユーザーがフィールドにフォーカスしたときに「逆通貨パイプ」を作成して、表示されるすべてが数値になるようにすることができます。

私はあなたの Stackblitzデモ を手短にフォークしましたが、最大長は小数点の前の桁数を指すと仮定しています。

何か変更が必要かどうか、それが問題の解決に役立つかどうかをお知らせください。

0
Jojofoulk