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: './',
styleUrls: ['./'],
export class NewProjectPage implements OnInit {
newProjForm: FormGroup;
startDate: Date = new Date();
constructor(private formBuilder: FormBuilder, private alertCtrl: AlertController) { }
ngOnInit() {
this.newProjForm ={
  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 ={
  startDate: [(new Date()).toISOString(), [Validators.required]] –

Answered By – C. Gäking

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published