How can I set my reactive form date input value?

Question

So I am trying to display this date for an input. But it's not displaying when setting the value of it in my form builder group. I would also like to be able to format it too.

this.post.startDate is of type Date

Whats in .ts

this.editForm = this.formBuilder.group({
      startDate: [this.post.startDate, Validators.compose([Validators.required])],
      endDate: [this.post.endDate, Validators.compose([Validators.required])]
    });

My reactive form has this

<form [formGroup]="editForm" (ngSubmit)="saveDate()">

        <label>Start Date: </label>
        <input type="date" formControlName="startDate" name="startDate" />

        <br />
        <label>End Date: </label>
        <input type="date" formControlName="endDate" name="endDate" />

        <br /><br />
        <input type="submit" value="Create Date">

      </form>

Solution 1

You have two possibilities to set you date as default value.

Variant 1:

For setting default date value to <input> tag with type date you should use HTML-property value of input-tag.

Example:

<form [formGroup]="editForm2">
    <input type="date" formControlName="startDate" value="{{ post.startDate | date:'yyyy-MM-dd' }}">
    <input type="date" formControlName="endDate" value="{{ post.endDate | date:'yyyy-MM-dd' }}">
</form>

Variant 2 (recommended):

You can use an built-in function formatDate() in angular.

Step 1:

Import formatDate() from @angular/common in you component typescript file.

import { formatDate } from '@angular/common';

Note: formatDate(yourDate, format, locale) expects 3-4 parameters.

Step 2:

Format your dates in definition of your form group.

this.editForm = this.formBuilder.group({
      startDate: [formatDate(this.post.startDate, 'yyyy-MM-dd', 'en'), [Validators.required]],
      endDate: [formatDate(this.post.endDate, 'yyyy-MM-dd', 'en'), [Validators.required]]
});

Here is working example: https://stackblitz.com/edit/angular-kucypd

Here is documentation of input type date: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Solution 2

Try the built-in formatDate package.

import { formatDate } from '@angular/common' 

and then convert your date and set it to the datepicker control

this.yourForm.controls.controlName.setValue(formatDate(date,'yyyy-MM-dd','en'));

Comments

[Pavel B.]

don't use {{ }} inside an attribute, that's bad practice!

[jason44107]

For a form input of type datetime-local, the way to convert theDate for display appears to be this: formatDate(theDate,'yyyy-MM-ddTHH:mm','en'). Case sensitive.

[Mohamed Mohsen]

Simple as possible to be the perfect answer.

[Shakir Ali]

Thanks, it works. It should be the accepted answer.