NgModel içindeki Boruları Açısal INPUT Öğelerinde Kullanma

Bir HTML INPUT alanım var.

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

ve değerini biçimlendirmek ve mevcut bir boruyu kullanmak istiyorum:

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

ve hata mesajını alın:

Eylem ifadesinde kanal olamaz

Boruları bu bağlamda nasıl kullanabilirim?

Şablon ifadesinde Şablon ifadesi işleçlerini (dikey çizgi, gezgini kaydet) kullanamazsınız :

(ngModelChange)="Template statements"

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

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

Şablon ifadeleri gibi, şablon ifadeleri de JavaScript'e benzeyen bir dil kullanır. Şablon deyimi ayrıştırıcısı, şablon ifadesi ayrıştırıcısından farklıdır ve özellikle hem temel atamayı (=) hem de zincirleme ifadelerini (veya;) ile destekler.

Ancak, belirli JavaScript sözdizimine izin verilmez :

• yeni
• arttırma ve azaltma operatörleri, ++ ve -
• operatör ataması, örneğin + = ve - =
• yönlü operatörler | ve &
• şablon ifade operatörleri

Bu yüzden aşağıdaki gibi yazmalısınız:

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

Plunker Örneği

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

Buradaki çözüm, sözdiziminin [(ngModel)]gerçekte kapsadığı tek yönlü bir bağlamaya ve bir olay bağlamasına bölünmektir . []tek yönlü bağlayıcı sözdizimidir ve ()olay bağlayıcı sözdizimidir. Birlikte kullanıldığında - [()]Angular bunu steno olarak tanır ve iki yönlü bir bağlamayı tek yönlü bir bağlanma ve bir bileşen nesne değerine bağlanan bir olay şeklinde bağlar.

[()]Bir boru ile kullanamamanızın nedeni , boruların sadece tek yönlü bağlantılarla çalışmasıdır. Bu nedenle boruyu sadece tek yönlü ciltleme üzerinde çalışacak şekilde ayırmanız ve olayı ayrı olarak ele almanız gerekir.

Daha fazla bilgi için Açısal Şablon Sözdizimi konusuna bakın .

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

Kabul edilen cevaba bir puan daha eklemek istiyorum.

Giriş kontrolünüzün tipi metin değilse, boru çalışmaz.

Unutmayın ve zaman kazanın.

Yukarıdaki çözümleri denedim, ancak modele giden değer, döndürülen ve bana currencyPipe hataları veren biçimlendirilmiş değerdi. Bu yüzden yapmak zorundaydım

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

Ve addToAmount -> bulanıklık üzerinde değişiklik fonksiyonu üzerinde ngModelChange bana imleç sorunları veriyor neden oldu.

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

Ve diğer sayısal olmayan değerleri kaldırmak.

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

Benim Çözüm aşağıda verilen searchDetail bir nesnedir ..

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

[(ngModel)] ile iki yönlü model bağlama yerine [ngModel] kullanmalısınız. ardından (ngModelChange) ile manuel değiştirme olayını kullanın. bu, bileşenlere iki yönlü girişlerin tümü için genel kuraldır.

çünkü olay vericideki boru yanlış.

çünkü iki yönlü ciltleme, önlemek için hata:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

modeli aşağıdaki gibi değiştirmek için bir işlev çağırabilirsiniz:

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

bu hatayı önlemek için daha iyi bir çözüm varsa iyi olur.