Date pipe in reactive forms

Question

What's the correct way to display a date pipe in a reactive form?

app-component.html

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <label for="fecha">Fecha: </label>
  <input 
  formControlName="fecha" 
  type="text"

  [value]="profileForm.get('fecha')?.value | date: 'dd/MM/yyyy'" >
 
<button (click)="onSubmit()">Update Profile</button>
</form>

app-component.ts

  profileForm = new FormGroup({
    fecha: new FormControl('2022-01-11 01:00:00.000')
  });
onSubmit() {
    console.warn(this.profileForm.value);
  }

score 1 · Answer 1 · answered Jan 25 '22 at 20:35

First, I suggest You read the selected answer here:

How to use pipes in Angular 5 reactive form input

In which the user has done the same thing as You. But it has a few issues, so on the same question, another answer was added (that was not selected as the answer) but which is the correct way. The link to it is:

https://stackoverflow.com/a/50956548/12251558

Date pipe in reactive forms

1 Answers1