Verwenden von Pipes in ngModel für INPUT-Elemente in Angular

Ich habe ein HTML-EINGABE-Feld.

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

und ich möchte seinen Wert formatieren und eine vorhandene Pipe verwenden:

.... 
[(ngModel)]="item.value | useMyPipeToFormatThatValue" 
....

und erhalten Sie die Fehlermeldung:

Ein Aktionsausdruck kann keine Pipe enthalten

Wie kann ich in diesem Zusammenhang Rohre verwenden?

Sie können keine Template-Ausdrucksoperatoren (Pipe, Save Navigator) in der Template-Anweisung verwenden:

(ngModelChange)="Template statements"

(ngModelChange) = "item.value | useMyPipeToFormatThatValue = $ event"

https://angular.io/guide/template-syntax#template-statements

Vorlagenanweisungen verwenden wie Vorlagenausdrücke eine Sprache, die wie JavaScript aussieht. Der Parser für Vorlagenanweisungen unterscheidet sich vom Parser für Vorlagenausdrücke und unterstützt insbesondere sowohl grundlegende Zuweisungs- (=) als auch Verkettungsausdrücke (mit; oder,).

Bestimmte JavaScript-Syntax ist jedoch nicht zulässig :

• Neu
• Inkrement- und Dekrementoperatoren, ++ und -
• Operatorzuweisung wie + = und - =
• die bitweisen Operatoren | und &
• die Vorlagenausdrucksoperatoren

Sie sollten es also wie folgt schreiben:

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

Plunker Beispiel

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

Die Lösung besteht darin, die Bindung in eine Einwegbindung und eine Ereignisbindung aufzuteilen - was die Syntax [(ngModel)]tatsächlich umfasst. []ist eine Einwegbindungssyntax und ()eine Ereignisbindungssyntax. Bei gemeinsamer Verwendung [()]erkennt Angular dies als Abkürzung und verdrahtet eine bidirektionale Bindung in Form einer einseitigen Bindung und einer Ereignisbindung an einen Komponentenobjektwert.

Der Grund, den Sie [()]mit einem Rohr nicht verwenden können, ist, dass Rohre nur mit Einwegbindungen funktionieren. Daher müssen Sie das Rohr aufteilen, um nur die Einwegbindung zu bearbeiten und das Ereignis separat zu behandeln.

Weitere Informationen finden Sie unter Angular Template Syntax .

<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />

Ich möchte der akzeptierten Antwort noch einen Punkt hinzufügen.

Wenn der Typ Ihres Eingabesteuerelements kein Text ist, funktioniert die Pipe nicht.

Denken Sie daran und sparen Sie Zeit.

Ich habe die oben genannten Lösungen ausprobiert, aber der Wert, der an das Modell geht, war der formatierte Wert, der zurückgegeben wurde und mir CurrencyPipe-Fehler gab. Also musste ich

  [ngModel]="transfer.amount | currency:'USD':true"
                                   (blur)="addToAmount($event.target.value)"
                                   (keypress)="validateOnlyNumbers($event)"

Und über die Funktion von addToAmount -> Änderung bei Unschärfe, weil ngModelChange mir Cursorprobleme bereitete.

removeCurrencyPipeFormat(formatedNumber){
    return formatedNumber.replace(/[$,]/g,"")
  }

Und Entfernen der anderen nicht numerischen Werte.

validateOnlyNumbers(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }

Meine Lösung ist unten angegeben. SearchDetail ist ein Objekt.

<p-calendar  [ngModel]="searchDetail.queryDate | date:'MM/dd/yyyy'"  (ngModelChange)="searchDetail.queryDate=$event" [showIcon]="true" required name="queryDate" placeholder="Enter the Query Date"></p-calendar>

<input id="float-input" type="text" size="30" pInputText [ngModel]="searchDetail.systems | json"  (ngModelChange)="searchDetail.systems=$event" required='true' name="systems"
            placeholder="Enter the Systems">

Sie müssen [ngModel] anstelle der bidirektionalen Modellbindung mit [(ngModel)] verwenden. Verwenden Sie dann das manuelle Änderungsereignis mit (ngModelChange). Dies ist eine öffentliche Regel für alle bidirektionalen Eingaben in Komponenten.

weil Pipe-on-Event-Emitter falsch ist.

wegen der Zwei-Wege-Bindung, um Fehler zu vermeiden von:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

Sie können eine Funktion zum Ändern des Modells wie folgt aufrufen:

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


import { UseMyPipeToFormatThatValuePipe } from './path';

constructor({
    private UseMyPipeToFormatThatValue: UseMyPipeToFormatThatValuePipe,
})

getNewValue(ev: any): any {
    item.value= this.useMyPipeToFormatThatValue.transform(ev);
}

Es ist gut, wenn es eine bessere Lösung gibt, um diesen Fehler zu verhindern.