localizedDate pipe in Angular

Question

<mat-form-field [ngClass]="formFieldHelpers" class="flex-auto">
    <mat-label class="font-base leading-4 font-medium">
        {{ 'HEALTHWALLET.TESTINGCARD.TestedDate' | translate}}
    </mat-label>
    <input matInput [matDatepicker]="tested" name="tested" [disabled]="!isEditable || item.testId"
          [(ngModel)]='item.tested' [max]='maxDate' required>
    <mat-datepicker-toggle matSuffix [for]="tested"></mat-datepicker-toggle>
    <mat-datepicker #tested></mat-datepicker>
</mat-form-field>

I am trying to add a date pipe (localizedDate) into the ngModel attribut of the above code.

<mat-form-field [ngClass]="formFieldHelpers" class="flex-auto">
    <mat-label class="font-base leading-4 font-medium">
        {{ 'HEALTHWALLET.TESTINGCARD.TestedDate' | translate}}
    </mat-label>
    <input matInput [matDatepicker]="tested" name="tested" [disabled]="!isEditable || item.testId"
          (ngModel)="item.tested | localizedDate:'MM/dd/YYYY'" [max]='maxDate' required>
    <mat-datepicker-toggle matSuffix [for]="tested"></mat-datepicker-toggle>
    <mat-datepicker #tested></mat-datepicker>
</mat-form-field>

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Jul 03 '23 at 20:20

TCH · Answer 1 · 2023-06-26T14:51:32.947

According to Using Pipes within ngModel on INPUT Elements in Angular and https://angular.io/guide/template-syntax --> you can't use Template expression operators (pipe, save navigator) within template statement.

In your case, this should work :

<input matInput [matDatepicker]="tested" name="tested" [disabled]="!isEditable || item.testId"
             [ngModel]="item.tested | localizedDate:'MM/dd/YYYY'" (ngModelChange)="item.value=$event" [max]='maxDate' required>

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.

I have implemented the above changes and still does not work. I wonder if the [matDatepicker] is where the issue lies. — Kevin, Jun 27 '23 at 15:43
And have you tried to add (dateInput)="$event.value.format('MM/dd/YYYY')" to — TCH, Jun 28 '23 at 13:37

localizedDate pipe in Angular

1 Answers1