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.