0

I have this below where birthDate is "1938-08-08T00:00:00" and I want it to be "dd/MM/yyyy", but I can't seem to figure out how to use the Angular date pipe in ngModel.

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [(ngModel)]=matterData.birthDate name="birthDate">

I tried this with no luck:

[(ngModel)]={{matterData.birthDate | date: 'dd/MM/yyyy'}}

The only way I can get it to work is if I format the date in the .ts code first with Angular 'formatDate()'

R. Richards
  • 24,603
  • 10
  • 64
  • 64
chuckd
  • 13,460
  • 29
  • 152
  • 331

3 Answers3

4

I don't understand why you want to format it inside a ngModel.

One way data binding (Interpolation {{}})doesn't work inside a two way databinding. If you want to use pipe, I would instead suggest to use a value attribute instead of ngModal.

Your HTML should look like: 

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [value]="matterData.birthDate | date: 'dd/MM/yyyy'" name="birthDate">

Here is a live example for the same. https://stackblitz.com/edit/angular-ubpthb

Arun Rajagopal
  • 84
  • 5
  • if I do this, then when I make a change to the field, my "editForm.dirty" which is form #editForm="ngForm" never becomaes dirty! – chuckd Dec 13 '19 at 00:08
  • You can use touched function as an alternative. like --> if(editForm.dirty || editForm.touched) – Arun Rajagopal Dec 13 '19 at 00:31
  • I'm not sure I understand. You're saying check if it's dirty or touched? What I want it to have it change from not dirty to dirty or not touched to touched! Can I set the editForm.dirty to true in the .ts file? How would I do that? – chuckd Dec 13 '19 at 00:36
  • Why do you want .dirty? are you doing any validation? If so what validation is required? Did you try editForm.pristine variable, it might return false when the validation is complete. – Arun Rajagopal Dec 13 '19 at 01:06
  • I cahnged it to pristine. I have it now. Thanks! – chuckd Dec 13 '19 at 02:03
0

On Angular 9, this works for me, with two way binding:

<input type="date" class="form-control" name="birthDate" [(ngModel)]="matterData.birthDate" [ngModel]="matterData.birthDate | date:'dd/MM/yyyy'" required>
Zbynek Vrana
  • 1
  • 1
-1

Ref - Using Pipes within ngModel on INPUT Elements in Angular

<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [ngModel]="matterData.birthDate | date: 'dd/MM/yyyy'" (ngModelChange)="matterData.birthDate=$event" name="birthDate">

Spandan
  • 221
  • 1
  • 4
  • this doesn't work! It formats it correctly when it loads, but as soon as I try and change the date. Ex. remove it, it starts changing the values that aren't correct! – chuckd Dec 12 '19 at 23:56
  • I understand why it throws an error, it's because it expects any data inside the box to be in the pipe format. So if I have a date and then try and remove a character it will throw an error! and try and fill it back with some other value, maybe some previous value I had in there. Not really sure yet. – chuckd Dec 13 '19 at 00:19
  • I need to be able to alow the user to modify the field without it throwing errors! – chuckd Dec 13 '19 at 00:20