Runtime error: cannot set property 'date' of undefined (JavaScript Date toISOString()) using TypeScript in Ionic v3

#1

Upon pushing data from my Form Model to Data Model,I’m failing to set the date automatically upon the form submission.(JavaScript Date toISOString())

This is my comment.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

import { FormBuilder, FormGroup } from '@angular/forms';

import { DishdetailPage } from '../dishdetail/dishdetail';





/
@IonicPage()
@Component({
  selector: 'page-comment',
  templateUrl: 'comment.html',
})
export class CommentPage {
  comment: any;
  
 private commentForm: FormGroup;
  

  constructor(public navCtrl: NavController, public navParams: NavParams, 
    public viewCtrl: ViewController, private formBuilder: FormBuilder){

      this.createForm();

    }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CommentPage');
  }

  dismiss() {
    this.viewCtrl.dismiss();
   
  }

  createForm() {
    this.commentForm = this.formBuilder.group({
      author: '',
      rating: 5,
      comment: ''
    });
  }



  onSubmit(comment) {
    this.comment.date = new Date().toISOString();
    this.comment = this.commentForm.value;
    this.viewCtrl.dismiss(this.comment);
    this.commentForm.reset();
 
  }
}
#2

I can’t tell what you’re trying to achieve, but these two lines in this order make no sense whatsoever. Are you sure they aren’t backwards?

#3

Thanks pal,
this.comment = this.commentForm.value;
The code line has no problem and its works fine,This line tries to call the variable assigned to the Form Group (i.e) commentForm: Form Group; as which the variable was added to the view form (comment.html) as follows

<form [formGroup]="commentForm" (ngSubmit)="onSubmit()">

<ion-item>

<ion-label floating> Your Name </ion-label>

<ion-input type="text" formControlName="author" name="author"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked> Your Rating </ion-label>

<ion-range min="1" max="5" step="1" pin="true" snaps="true" formControlName="rating" name="rating">

<ion-icon range-left small name="sad"></ion-icon>

<ion-icon range-right name="happy"></ion-icon>

</ion-range>

</ion-item>

<ion-item>

<ion-label floating> Your Comment </ion-label>

<ion-textarea rows=12 formControlName="comment" type="text" name="comment"></ion-textarea>

</ion-item>

<button ion-button type="submit" [disabled]="commentForm.invalid">Submit</button>

</form>

as you can see from the view which will be triggerred in a modal, the form has no date input and thats is whats its supposed to be.

Truth betold, The issue it is there on this.comment.date = new Date().toISOString(); and it is where i was seeking for a solution

now , the modal which is composed of the (comment.ts & comment.html) is pushing the data next to the DishDetailPage as good with no problems except i want to set the JavaScript Date Object.toISOString() automatically to post the current date in the stack of comments in the DishdetailPage upon the Form submission by the modal.

now the question is where or how will i set the JavaScript Date Object.toISOString() automatically the current date to be posted in the stack of comments of the DishdetailPage, Suppose the following are the DishdetailPage.ts and DishdetailPage.html respectively

.......


export class DishdetailPage {
  comment: any;
  dish: Dish;
 


  constructor(public navCtrl: NavController, public navParams: NavParams,
    @Inject('BaseURL') private BaseURL,
    private favoriteservice: FavoriteProvider,
    private toastCtrl: ToastController,
    private actionSheetCtrl: ActionSheetController,
    private modelController: ModalController) {
   

   ..........

  ...........
  
    
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DishdetailPage');
  }

....

    .....

  actionSheet() {
    const actionSheet = this.actionSheetCtrl.create({
      title: 'Select Actions',
      buttons: [
      
        {
          text: 'Add a Comment',
          handler: () => {
            this.openModel();
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          } 
        }
      ]
    });
    actionSheet.present();
  }
//CONSIDER THIS AS A MODAL OF THE FORM OF THE CommentPage
  openModel(){
    let model = this.modelController.create('CommentPage');
    model.present()
    model.onDidDismiss(comment => {
     if (comment) {
       this.dish.comments.push(comment);
     }
   });
  }


}

and this is the Dishdetail.html

//Consider This is the Stack that the comment will be pushed to from the model hence user can see the comments here, everydetail is shown clearly to the user EXCEPT the date {{comment.date}}, now here is where i was looking for the solution to you pal


<ion-list *ngIf="dish">

<ion-list-header> Comments </ion-list-header>

<ion-item *ngFor="let comment of dish.comments" text-wrap>

<h4> {{ comment.comment }}</h4>

<p> {{comment.rating}} Stars</p>

<p>

<span> -- {{comment.author}} {{comment.date | date}}</span>

</p>

</ion-item>

</ion-list>

Thanks.

#4

That may very well be true, but it blows away any effect that the previous line even could have had, because it is completely replacing this.comment. It is as if you had a plate of pasta, cooked up a marinara sauce, and then switched the entire plate for a hamburger. If you are going to end up with hamburger, why make the marinara?

So I think you have a couple of options here: either a hidden FormControl to store the date, which you would prime with the current date in createForm(), or switching the order of these two lines so that the sauce is going on the right dish.

#5

Okay rapropos, For there, I’ll prefer a plate of pasta and cooked up marinara sauce!!, Thanks for your views any way i found a way out here

You Remember the Dishdetail.ts?,Thats where the Hamburger fits , Okay,For openModel(){} to the model.onDidDismiss() within the if (comment) {} thats where the JavaScript Date Object toISOString should be set , and the date is now automatically set to the list of comments ,This is as shown below;

openModel(){
    let model = this.modelController.create('CommentPage');
    model.present()
    model.onDidDismiss(comment => {
     if (comment) {
       comment.date = new Date().toISOString();
       this.dish.comments.push(comment);
     }
   });
  }

Thanks, This is for the benefits of all

1 Like