1

I have this expression in my angular HTML form. 

 <mat-form-field (keydown.enter)="$event.preventDefault()" >
        <input id="StartDate" matInput placeholder="Start Date" name="start" [textMask]="mask"   [(ngModel)]="RecLoadData.startDate | date:'MM/dd/yyyy'" (ngModelChange)="RecLoadData.startDate=$event" (blur)="onBlurOpenAndCodeDate($event.target.value, 1)">
    </mat-form-field>

I keep getting an error saying:

Parser Error: Cannot have a pipe in an action expression at column 25 in [RecLoadData.startDate | date:'MM/dd/yyyy'=$event] in c:/RecLoad/RecLoadAng/src/app/Recload/Recload.component.html@22:110ng(0)
Parser Error: Unexpected token , expected identifier or keyword at the end of the expression [RecLoadData.startDate | date:'MM/dd/yyyy'=$event] in c:/RecLoad/RecLoadAng/src/app/Recload/Recload.component.html@22:110ng(0)

I am already using (ngModelChange) which is suggested in another post. This post is not a duplicate.

Any help will be highly appreciated.

Anjali
  • 2,540
  • 7
  • 37
  • 77
  • Does this answer your question? [Cannot have a pipe in an action expression ?](https://stackoverflow.com/questions/46040687/cannot-have-a-pipe-in-an-action-expression) – ruth May 02 '20 at 00:24

1 Answers1

4

The DatePipe cannot be used with two-way data binding [(ngModel)]="...". Since you already update the value with (ngModelChange), you can display the date in the input element with one-way data binding, using [ngModel]. In the following code example, I update the value only when leaving the input field, with the ngModel option updateOn: 'blur'.

<input [ngModel]="myDate | date:'MM/dd/yyyy'" 
       (ngModelChange)="onChangeDate($event)" 
       [ngModelOptions]="{ updateOn: 'blur' }" ... >

onChangeDate(value) {
  this.myDate = new Date(value);
}

See this stackblitz for a demo.

ConnorsFan
  • 70,558
  • 13
  • 122
  • 146