[FIXED] Ionic DateTime error: Cannot read property 'toISOString' of undefined


I want to display the current date as a default value,is not working if I use the formControlName but I need to use the formControlName.

Here is my HTML file

    <ion-label color="primary"> Start date </ion-label>
    <ion-datetime [value]="startDate.toISOString()" formControlName="startDate" required></ion-datetime>
  <div id="startDateErrorMessage" *ngIf="newProjForm.controls['startDate'].invalid &(newProjForm.controls['startDate'].dirty || newProjForm.controls['startDate'].touched)">
    <span class="error ion-padding" *ngIf="newProjForm.controls['startDate'].errors.required"> Date is required </span>

and here is my TS file

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
selector: 'app-new-project',
templateUrl: './new-project.page.html',
styleUrls: ['./new-project.page.scss'],
export class NewProjectPage implements OnInit {
newProjForm: FormGroup;
startDate: Date = new Date();
constructor(private formBuilder: FormBuilder, private alertCtrl: AlertController) { }
ngOnInit() {
this.newProjForm = this.formBuilder.group({
  startDate: ['' ,[Validators.required]]

when I compile the project I’m getting this errors

"ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘toISOString’ of undefined"

"TypeError: Cannot read property ‘toISOString’ of undefined"

Can anyone point me in the right direction please?


To set the initial value in a form builder object, don’t use [value] in the html template. You can replace the ” with the initial value of the field like:

this.newProjForm = this.formBuilder.group({
  startDate: [(new Date()).toISOString(), [Validators.required]] –

Answered By – C. Gäking

Answer Checked By – David Marino (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published