Using Pipes within ngModel on INPUT Elements in Angular

Question

I've an HTML INPUT field.

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

and I want to format its value and use an existing pipe:

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

and get the error message:

Cannot have a pipe in an action expression

How can I use pipes in this context?

Answer 1

You can't use Template expression operators(pipe, save navigator) within template statement:

(ngModelChange)="Template statements"

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

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

Like template expressions, template statements use a language that looks like JavaScript. The template statement parser differs from the template expression parser and specifically supports both basic assignment (=) and chaining expressions (with ; or ,).

However, certain JavaScript syntax is not allowed:

• new
• increment and decrement operators, ++ and --
• operator assignment, such as += and -=
• the bitwise operators | and &
• the template expression operators

So you should write it as follows:

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

Plunker Example

Answer 2

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

The solution here is to split the binding into a one-way binding and an event binding - which the syntax [(ngModel)] actually encompasses. [] is one-way binding syntax and () is event binding syntax. When used together - [()] Angular recognizes this as shorthand and wires up a two-way binding in the form of a one-way binding and an event binding to a component object value.

The reason you cannot use [()] with a pipe is that pipes work only with one-way bindings. Therefore you must split out the pipe to only operate on the one-way binding and handle the event separately.

See Angular Template Syntax for more info.

Answer 3

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

I would like to add one more point to the accepted answer.

If the type of your input control is not text the pipe will not work.

Keep it in mind and save your time.

Answer 4

I tried the solutions above yet the value that goes to the model were the formatted value then returning and giving me currencyPipe errors. So i had to

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

And on the function of addToAmount -> change on blur cause the ngModelChange was giving me cursor issues.

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

And removing the other non numeric values.

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

Answer 5

you must use [ngModel] instead of two way model binding with [(ngModel)]. then use manual change event with (ngModelChange). this is public rule for all two way input in components.

because pipe on event emitter is wrong.

Answer 6

My Solution is given below here searchDetail is an object..

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

Answer 7

because of two way binding, To prevent error of:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

you can call a function to change model like this:

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

it'll be good if there is a better solution to prevent this error.

Answer 8

way to modify any data dynamically with the help of value and input

<input [value]="currentItem.name"
       (input)="currentItem.name=getValue($event)">

getValue(event: Event): string {
  let utcDateString = (event.target as HTMLInputElement).value;
 if (utcDateString && utcDateString.includes('000Z')) {
      const utcDate = new Date(utcDateString);
      const year = utcDate.getUTCFullYear();
      const month = String(utcDate.getUTCMonth() + 1).padStart(2, '0'); // Months are zero-based
      const day = String(utcDate.getUTCDate()).padStart(2, '0');
      utcDateString = `${year}-${month}-${day}`;
      return utcDateString;
    }
return utcDateString 
}

For example, I have a date that is coming in ISO format "2024-05-31T00:00:00.000Z" and I want to convert that date to "2024-05-31" because I was directly using my Data of Object which should provide the data and update the data in the same array of objects.

dateData = [{from:"2024-05-31T00:00:00.000Z",to:"2024-05-31T00:00:00.000Z"},{from:"2024-05-31T00:00:00.000Z",to:"2024-05-31T00:00:00.000Z"}]

So the solution I have found is

<div class="row" *ngFor="let season of dateData; let inx = index">
  <div class="col form-group">
    <label for="from">Start date</label>
    <input
      class="form-control"
      id="from_{{ inx }}"
      type="date"
      value="{{ season.from | date : 'yyyy-MM-dd' }}"
      (input)="season.from = getValue($event)"
      required
    />
  </div>
</div>
<div class="col-3">
  <div class="col form-group">
    <label for="to">End date</label>
    <input
      class="form-control"
      id="to_{{ inx }}"
      type="date"
      value="{{ season.to | date : 'yyyy-MM-dd' }}"
      (input)="season.to = getValue($event)"
      required
    />
  </div>
</div>

Thanks !