Question

您好，我被困在这里无法将表格模型映射到数据模型这是我的模板驱动表单

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

因此，我想将我在“模板驱动”表单中提供的所有数据推送到此数据模型（即，将要被推送到下面的数据模型的所有作者，评分和评论数据 < / p>

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

将以下内容称为模板驱动表单模型的Typescript文件

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: ''
    });
  }
}

老实说，我是Ionic 3的新手，尤其是在将表单模型映射到数据模型方面，因此任何人都可以与我分享一些技能，以便我可以解决这个问题，我很开放。 < / p>

Answer 1

您需要从要从模板调用的OnSubmit（param）中访问NgForm值。

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: ''
    });
  }
}

Answer 2

感谢@Suresh Kumar Ariya，感谢您对此的支持，但将军，我已成功解决了这一问题，将军，在Ionic 3中使用Typescript尝试在JavaScript中将数据从表单模型推入数据模型时存在差异，这是完全不同的，因为Ionic依赖于模式将数据从一页推入另一页，因此您必须导入和使用View Controller在您的TypeScript中将数据从一页推到另一页。我将在下面的代码中显示

首先，它是使用离子反应形式而不是离子模板形式的最佳方法，因为在我们的案例中，对于离子反应形式，很容易解析您从中分配给[FormGroup]的变量并将其直接应用于打字稿中的方法如下：

根据我的代码Qns

commentForm是分配给表单组的变量

1） comment.ts（您应该使用离子反应形式）

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在这里，您必须在我们的视图中添加commentForm

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

   .....
   .....

   </form>

3）。 Dishdetail.ts（在这里我要将我的评论添加到当前其他评论的列表中）

因为我们依赖于将注释推送到Dishdetail.html中存在的其他注释列表的方式，所以这应该被编码，

......

.......

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

谢谢。

如何在ionic 3中将数据从模板驱动的形式推送到数据模型

2 个答案: