Ionic DateTime error: Cannot read property 'toISOString' of undefined

Issue

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-item>
    <ion-label color="primary"> Start date </ion-label>
    <ion-datetime [value]="startDate.toISOString()" formControlName="startDate" required></ion-datetime>
  </ion-item>
  <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>
  </div>

and here is my TS file

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
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?

Solution

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

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