Angular2＆Ionic2：NavParamsからフォーム値への値のバインド

Question

私はユーザーが選択した電子商取引アプリケーションを構築しています。 選択が行われ、量が選択されると、それらのデータはORDERページに送られます。

私はformModelを使用して注文を作成します。

NavParamsの今後の値productId、quantity、price、およびtotalをinput 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"