我正在构建一个电子商务应用,其中用户选择产品。 当选择和选择数量时,这些数据将被发送到ORDER页面。
我使用formModel来构建你的订单。
我将NavParams的即将到来的值productId,数量,价格和总数作为输入类型=“隐藏”传递给表单。
所有其他值都为空[ngFormControl]。
如果我不将[ngFodeCon]] [[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);
}
}
答案 0 :(得分:4)
使用
productId: ['', Validators.required],
该值设置为''
,因此为空。
而不是
value="{{toOrder.id}}"
使用
[(ngModel)]="toOrder.id"