Utilizzo di pipe in ngModel su INPUT Elements in Angular

Ho un campo HTML INPUT.

 

e voglio formattare il suo valore e usare una pipe esistente:

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

e ricevi il messaggio di errore:

Non può avere una pipe in un’espressione di azione

Come posso usare le pipe in questo contesto?

    Non è ansible utilizzare gli operatori di espressione Template (pipe, save navigator) all’interno dell’istruzione template:

     (ngModelChange)="Template statements" 

    (ngModelChange) = “item.value | useMyPipeToFormatThatValue = $ event”

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

    Come le espressioni modello, le istruzioni modello usano un linguaggio simile a JavaScript. Il parser dell’istruzione template differisce dal parser di espressioni del template e supporta specificamente sia l’assegnazione di base (=) che le espressioni di concatenamento (con; o,).

    Tuttavia, alcune syntax JavaScript non sono consentite :

    • nuovo
    • operatori di incremento e decremento, ++ e –
    • assegnazione dell’operatore, come + = e – =
    • gli operatori bit a bit | e &
    • gli operatori di espressione del modello

    Quindi dovresti scriverlo come segue:

      

    Esempio di Plunker

      

    La soluzione qui è di dividere il binding in un binding unidirezionale e un binding di evento – che la syntax [(ngModel)] comprende effettivamente. [] è la syntax bind a senso unico e () è syntax di associazione eventi. Se utilizzato insieme – [()] Angular lo riconosce come abbreviazione e collega un’associazione bidirezionale sotto forma di un legame unidirezionale e un binding di evento a un valore dell’object componente.

    Il motivo per cui non è ansible utilizzare [()] con una pipe è che le pipe funzionano solo con binding unidirezionali. Pertanto è necessario dividere il tubo per operare solo sulla rilegatura unidirezionale e gestire l’evento separatamente.

    Vedi Sintassi dei modelli angolari per maggiori informazioni.

    Ho provato le soluzioni sopra ancora il valore che va al modello sono stati il ​​valore formattato quindi restituendo e dandomi errori currencyPipe. Quindi ho dovuto

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

    E sulla funzione di addToAmount -> cambia su sfocatura causa che ngModelChange mi dava problemi con il cursore.

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

    E rimuovendo gli altri valori non numerici.

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

    La mia soluzione è data qui di seguito searchDetail è un object ..

       
      

    Vorrei aggiungere un altro punto alla risposta accettata.

    Se il tipo di controllo di input non è text, la pipe non funzionerà.

    Tienilo a mente e risparmia tempo.