web-dev-qa-db-ja.com

Angular 4-type = 'input'の小数点以下2桁をレンダリングする方法

この質問 は、ユーザーがタイプ番号の入力にデータを入力するときの入力の制限/検証についてです。

私が抱えている問題は、モデルが最初に読み込まれたときに、整数または1 dpの数値が1 dpだけでレンダリングされることです。たとえば、40または40.0は両方とも40.0としてではなく40.0として表示されます。

ユーザーが新しい値を入力した後、2 dpで表示されるように、このコードを追加しました。

テンプレートファイル内：

(change)="setTwoNumberDecimal($event)"

コンポーネントファイル内：

  setTwoNumberDecimal($event) {
    $event.target.value = parseFloat($event.target.value).toFixed(2);
  }

これは2dpを表示するように機能しますafterユーザーが値を変更します。

データが最初に読み込まれるときに2dpにフォーマットする必要があるディレクティブを記述しようとしましたが、ディレクティブは起動しますが、値を2dpに変更しません。

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive ({
  selector: '[fbDecimalFormat]'
})

export class DecimalFormatDirective {

  constructor(private el: ElementRef,
              private renderer: Renderer2) {
    //renderer.setAttribute(el, 'value', parseFloat(el.nativeElement.value).toFixed(2));
    this.el.nativeElement.value = parseFloat(this.el.nativeElement.value).toFixed(2);
  }

}

ちなみに、コメント付きのレンダリング行は機能しませんでした（エラー：setAttributeが認識されません）-これは、プラットフォームに依存しない試みでした。

だから問題は：2dpsで初期値をレンダリングするための入力をどのように取得できますか？

angularangular-directive
5
rmcsharry

テンプレートフォーム

これに対する解決策は、組み込みのDecimalPipe（奇妙に呼ばれる数値）を使用し、モデル値に双方向バインディングを使用しないことです。 [（ngModel）]から[ngModel]および（ngModelChange）

    <input type="number" step="0.01" 
            (change)="setTwoNumberDecimal($event)"
            (ngModelChange)="item.value=$event"
            [ngModelOptions]="{updateOn: 'blur'}"
            [ngModel]="setting.decimal_value | number:'1.2-2'">

[（）]バインディングの分割の詳細については、 この質問 を参照してください。

また、ユーザーがコントロール（ブラー）を離れたときにのみ更新が発生することに注意してください。それ以外の場合は、更新する何かを入力するたびに更新されます。

反応フォーム

コメント内の質問への回答：「これは反応フォームでも使用できますか？」

答えは：

いいえ、反応形式のパイプを使用するのはより複雑です。次のように、パイプを使用して値を表示するだけです。

 <p>{{form.get('name').value | myPipe}}</p>

しかし、正しい方法は値アクセサを使用することだと思います。詳細 ここ 。

11
rmcsharry

Number.toFixed（x）後続の小数の「x」個の数値をフォーマットします。数値は切り上げられ、必要な小数部の長さを作成する必要がある場合は、小数点の後に「0」が使用されます。テンプレートでは、値をフォーマットして値を検証できます

value1 = 0
value2 = 0.0

<p>
  {{value1.toFixed(2)}} - shows 0.00
  {{value2.toFixed(2)}} - shows 0.00
</p>
2
MukundK