Angular 4 - wie man 2 Dezimalstellen für type = 'Eingabe' rendern

Question

This question ist über die Einschränkung/Validierung der Eingabe, wenn der Benutzer Daten in einen Eingang des Typs Nummer eingibt.

Das Problem, das ich habe, ist, dass, wenn das Modell zuerst geladen wird, alle Zahlen, die ganze Zahlen oder 1DP sind, mit nur 1DP gerendert werden. zB 40 oder 40.0 zeigen beide als 40.0 (nicht als 40.00).

Ich habe diesen Code hinzugefügt, so dass ein neuer Wert nach Nutzertyp, zeigt es mit 2dp:

in der Template-Datei:

(change)="setTwoNumberDecimal($event)" 

in der Komponentendatei:

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

Dies funktioniert 2dp nach der Benutzer den Wert ändert.

Ich habe versucht, eine Direktive zu schreiben, die auf 2dp formatiert werden sollte, wenn die Daten zuerst geladen werden, aber obwohl die Direktive ausgelöst wird, ändert sie den Wert nicht auf 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); 
    } 

} 

FYI die Kommentarzeile machen funktionierte nicht (Fehler: setAttribute nicht erkannt) - es war ein Versuch, plattformunabhängig zu sein.

So ist die Frage: Wie kann ich die Eingabe erhalten, um seinen Anfangswert mit 2dps zu rendern?

Answer 1

Die Lösung hierfür war die eingebaute DecimalPipe (seltsamerweise Nummer genannt) und keine Zwei-Wege-Bindung für den Modellwert zu verwenden - dh. von [(ngModel)] zu [ngModel] und (ngModelChange)

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

this question für weitere Informationen auf die [()] auf eine Aufteilung Bindung See.