Menggunakan Pipa dalam ngModel pada Elemen INPUT di Angular

Saya memiliki bidang INPUT HTML.

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

dan saya ingin memformat nilainya dan menggunakan pipa yang ada:

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

dan dapatkan pesan kesalahan:

Tidak dapat memiliki pipa dalam ekspresi tindakan

Bagaimana saya bisa menggunakan pipa dalam konteks ini?

Anda tidak dapat menggunakan operator ekspresi Templat (pipa, simpan navigator) dalam pernyataan templat:

(ngModelChange)="Template statements"

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

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

Seperti halnya ekspresi template, pernyataan template menggunakan bahasa yang mirip dengan JavaScript. Parser pernyataan template berbeda dari Parser ekspresi template dan secara khusus mendukung penugasan dasar (=) dan ekspresi chaining (dengan; atau,).

Namun, sintaksis JavaScript tertentu tidak diizinkan :

• baru
• operator kenaikan dan penurunan, ++ dan -
• tugas operator, seperti + = dan - =
• operator bitwise | dan &
• operator ekspresi template

Jadi Anda harus menuliskannya sebagai berikut:

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

Contoh Plunker

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

Solusinya di sini adalah untuk membagi pengikatan menjadi pengikatan satu arah dan pengikatan peristiwa - yang [(ngModel)]sebenarnya mencakup sintaks . []adalah sintaks pengikatan satu arah dan ()sintaks pengikatan acara. Ketika digunakan bersama-sama - [()]Angular mengakui ini sebagai steno dan mengikat pengikatan dua arah dalam bentuk pengikatan satu arah dan peristiwa yang mengikat ke nilai objek komponen.

Alasan Anda tidak dapat menggunakan [()]pipa adalah karena pipa hanya berfungsi dengan binding satu arah. Oleh karena itu Anda harus membagi pipa untuk hanya beroperasi pada penjilidan satu arah dan menangani acara secara terpisah.

Lihat Sintaks Templat Angular untuk info lebih lanjut.

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

Saya ingin menambahkan satu poin lagi ke jawaban yang diterima.

Jika jenis kontrol input Anda bukan teks, pipa tidak akan berfungsi.

Ingatlah dan hemat waktu Anda.

Saya mencoba solusi di atas namun nilai yang masuk ke model adalah nilai yang diformat kemudian kembali dan memberi saya kesalahan currencyPipe. Jadi saya harus melakukannya

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

Dan pada fungsi addToAmount -> perubahan blur menyebabkan ngModelChange memberi saya masalah kursor.

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

Dan menghapus nilai-nilai non numerik lainnya.

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();
  }

Solusi saya diberikan di bawah sini searchDetail adalah objek ..

<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">

Anda harus menggunakan [ngModel] alih-alih model dua arah mengikat dengan [(ngModel)]. kemudian gunakan acara perubahan manual dengan (ngModelChange). ini adalah aturan umum untuk semua input dua arah dalam komponen.

karena pipa pada event emitor salah.

karena dua cara mengikat, Untuk mencegah kesalahan:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

Anda dapat memanggil fungsi untuk mengubah model seperti ini:

<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);
}

akan lebih baik jika ada solusi yang lebih baik untuk mencegah kesalahan ini.