Angular2 和 Ionic2：从 NavParams 到 Form 值的绑定值

Question

我正在构建一个电子商务应用程序，用户可以在其中选择产品。做出选择并选择数量后，这些数据将发送到订单页面。

我使用 formModel 为您创建订单。

我将 NavParams 的即将到来的值 productId、数量、价格和总计作为输入 type="hidden" 传递给表单。

所有其他值为空 [ngFormControl]。

如果我不将 [ngFormControl] 和 [(ngModel)] 与值一起使用，我将获得请求的值...

我不明白为什么 [ngFormControl] 值是空的...怎么了？

.html 文件：

<form [ngFormModel]="orderForm" (ngSubmit)="onSubmit(orderForm.value)">

<!-- Hidden fields to pass for the order -->
<input [ngFormControl]="productId" type="text" value="{{toOrder.id}}"/>
<input [ngFormControl]="productPrice" type="text" value="{{toOrder.price}}"/>
<input [ngFormControl]="productQuantity" type="text" value="{{toOrderQuantity}}"/>
<input [ngFormControl]="totalAmount" type="text" value="{{total()}}"/>

  <ion-item>
    <ion-label>Nom</ion-label>
    <ion-input [ngFormControl]="lastName" type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Prénom</ion-label>
    <ion-input [ngFormControl]="firstName" type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Adresse</ion-label>
    <ion-input [ngFormControl]="address" type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Code Postal</ion-label>
    <ion-input [ngFormControl]="zipcode" type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Ville</ion-label>
    <ion-input [ngFormControl]="city" type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Email</ion-label>
    <ion-input [ngFormControl]="email" type="text" value=""></ion-input>
  </ion-item>

<br/>

<button padding block type="submit">Valider & Payer</button>
</form>

和.ts:

import {Page, NavController, NavParams} from 'ionic-angular';
import {Inject, OnInit} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { FORM_DIRECTIVES, FormBuilder,  ControlGroup, Validators, AbstractControl, Control } from 'angular2/common';
import {WooService} from '../woo/woo.service';

@Page({
  templateUrl: 'build/pages/ecommerce/wooorder/wooorder.html',
  providers: [WooService],
  directives: [FORM_DIRECTIVES],
})

export class WooorderPage {
  toOrder: any;
  private _wooService;
  response: string;
  isLoading = true;
  toOrderQuantity:number;
  // Forms values
  orderForm: ControlGroup;
  productId: AbstractControl;
  productPrice: AbstractControl;
  productQuantity: AbstractControl;
  totalAmount: AbstractControl;
  lastName: AbstractControl;
  firstName: AbstractControl;
  address: AbstractControl;
  zipcode: AbstractControl;
  city: AbstractControl;
  email: AbstractControl;


  constructor(public nav: NavController, navParams: NavParams,
    fb: FormBuilder, wooService:WooService) {
    this.nav = nav;
    this._wooService = wooService;
    // Values from previois page with NavParams
    this.toOrder = navParams.get('selectedItem');
    this.toOrderQuantity = navParams.get('quantity');

    this.orderForm = fb.group({
      productId: ['', Validators.required],
      productPrice: ['', Validators.required],
      productQuantity: ['', Validators.required],
      totalAmount: ['', Validators.required],
      lastName: ['', Validators.required],
      firstName: ['', Validators.required],
      address: ['', Validators.required],
      zipcode: ['', Validators.required],
      city: ['', Validators.required],
      email: ['', Validators.required]
    });

this.productId =     this.orderForm.controls['productId'];
this.productPrice =   this.orderForm.controls['productPrice'];
this.productQuantity =  this.orderForm.controls['productQuantity'];
this.totalAmount =   this.orderForm.controls['totalAmount'];
this.lastName =  this.orderForm.controls['lastName'],
this.firstName =    this.orderForm.controls['firstName'],
this.address =    this.orderForm.controls['address'],
this.zipcode =  this.orderForm.controls['zipcode'],
this.city =  this.orderForm.controls['city'],
this.email =  this.orderForm.controls['email']
}


  total(){
    return (this.toOrder.price*this.toOrderQuantity+10);
  }

  onSubmit(values) {
    // this._wooService.createOrder();
    console.log(values);
  }
}

Answer 1

有

 productId: ['', Validators.required],

该值设置为 ''，因此为空。

而不是

value="{{toOrder.id}}"

使用

[(ngModel)]="toOrder.id"

Angular2 和 Ionic2：从 NavParams 到 Form 值的绑定值

Angular2 & Ionic2 : Binding value from NavParams to Form value

forms

ionic2

angular