how to push data from template driven form to data model in ionic 3

Question

Hi Pals,Im stucked here Failing to map Form Model into Data Model Here is my Template driven Form

<ion-content padding>

  <form #commentForm ="ngForm" (ngSubmit)="onSubmit(form)" novalidate>
    <ion-item>
      <ion-label floating> Your Name </ion-label>
      <ion-input type="text" required [(ngModel)]="todo.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" [(ngModel)]="todo.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 required [(ngModel)]="todo.comment" name="comment"></ion-textarea>
    </ion-item>
    <button ion-button type="submit" [disabled]="commentForm.invalid" (click)="onSubmit()">Submit</button>
  </form>

</ion-content>

Hence i Want to push every data that i feed in my Template Driven Form to this Data Model (i.e) every data which are author,rating and comment to be pushed to the Data Model below

<ion-header>

...

  <ion-content padding>

  <ion-card *ngIf="dish">
    <img src="{{BaseURL + dish.image}}"/>
    ...
    <ion-row>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="star"></ion-icon>
          <div>{{ avgstars }} stars</div>
        </button>
      </ion-col>
      <ion-col>
        <button ion-button icon-left clear small>
          <ion-icon name="text"></ion-icon>
          <div>{{ numcomments }} Comments</div>
        </button>
      </ion-col>
    </ion-row>
  </ion-card>

  <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>

  </ion-content>

refer the following as the Typescript file for the Template Driven Form Model

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

import { Dish } from '../../shared/dish';
import { Comment } from '../../shared/comment';

@IonicPage()
@Component({
  selector: 'page-comment',
  templateUrl: 'comment.html',
})
export class CommentPage {
  todo = {
    author:'', 
    rating: 5,
    comment: ''
  };


  constructor(public navCtrl: NavController, public navParams: NavParams, 
    public viewCtrl: ViewController, 

    ) {}

....

  onSubmit() {

    this.comment = this.commentForm.value;
    this.comment.date = new Date().toISOString();
    console.log(this.comment);
    this.dish.comments.push(this.comment);
    this.commentForm.reset({
      author:'',
      rating: 5,
      comment: ''
    });
  }
}

Honestly, I'm new to Ionic 3 especially on Maping Form Model to Data Model,hence any one can share with me some skills so that i can solve this,I'm open.

Doing all the above, I'm getting this Runtime error which says " cannot read property 'value' of undefined — mcndoungerii
– mcndoungerii, Commented Aug 11, 2018 at 18:41

mcndoungerii · Accepted Answer · 2018-08-13 07:03:39Z

Thanks @Suresh Kumar Ariya ,For your contibution about this but General,I've Succeed to tackle this, General, There is Difference when trying to push data from Form Model to Data Model in JavaScript is completely different when using Typescript in Ionic 3 because Ionic depends on the Modal to have Push Data from One Page to Another ,Hence You Have to import and use View Controller in your TypeScript to have Push Data from One Page to Another.I will show this to the Below Code

First, Its Best way to use Ionic Reactive Form instead of Ionic Template Form, because in our case, For Ionic Reactive Form It is easy to parse variables from which you had assigned to the [FormGroup] in and directly apply them on the method in the typescript,this is as follows:

From my Codes Qns

commentForm be variable assigned to Form Group

1) comment.ts(you are Supposed to use Ionic Reactive Form)

import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

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

....

....

comment: any;
private commentForm: FormGroup;

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

      this.createForm();

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


  onSubmit(comment) {

    this.comment = this.commentForm.value;
    **this.viewCtrl.dismiss(this.comment);** //This is what Pushes the Data
    this.commentForm.reset();
}

2). comment.html Here You have to add commentForm to our view

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

   .....
   .....

   </form>

3). Dishdetail.ts (Here is where i want my comment to be added to the list of other comment present)

Because we are depending on the modal to push comment to the list of other comment present in Dishdetail.html and this is what supposed to be coded,

......

.......

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

Thanks.

@Suresh Kumar Ariya, Upon the comment.ts file ,to the onSubmit(comment) { this.comment.date = new Date().toISOString(); this.comment = this.commentForm.value; this.viewCtrl.dismiss(this.comment); this.commentForm.reset(); }, there of this JavaScript Date Object Fails to be added automatically in my List of Comment ,is there any way you know how to add it Automatically in Ionic because when i run the code,it bring Runtime error : cannot set property 'date' of undefined

Suresh Kumar Ariya · Accepted Answer · 2018-08-11 18:48:58Z

0

You need to access NgForm Values from the OnSubmit(param) which you are calling from template.

onSubmit(_commentform) {

    this.comment = _commentform.value;
    this.comment.date = new Date().toISOString();
    console.log(this.comment);
    this.dish.comments.push(this.comment);
    this.commentForm.reset({
      author:'',
      rating: 5,
      comment: ''
    });
  }
}

answered Aug 11, 2018 at 18:48

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

9 Comments

mcndoungerii Over a year ago

Thanks @Suresh Kumar Ariya , Still I'm Getting Little Confused, from <form #commentForm ="ngForm" (ngSubmit)="onSubmit(form)" novalidate> ,regarding to this ,Where NgForm values you're saying to be accessed from the onSubmit(param)??

Suresh Kumar Ariya Over a year ago

I am refering to (ngSubmit) event in this code. <form #commentForm ="ngForm" (ngSubmit)="onSubmit(form)" novalidate>

mcndoungerii Over a year ago

Thanks @Suresh Kumar Ariya , I'm Sorry for the disturbances but Honestly I'm new to ionic, i need much clarification (i.e step by step if possible) on reference to my code above because I'm getting stucked with TypeScript error which is : property value "commentForm" doesn't exist in "CommentPage",,

Suresh Kumar Ariya Over a year ago

In whic line you are getting error. Can you please share stakblitz

mcndoungerii Over a year ago

,<iframe src="stackblitz.com/edit/ionic-wehsh2?embed=1&file=pages/comment/…>

|

Collectives™ on Stack Overflow

how to push data from template driven form to data model in ionic 3

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related