[英]How to fix 'Cannot read property of undefined' error in Angular post request
我收到這些錯誤,我不知道如何修復它。 我正在制作一個表單,該表單將向API發出請求。
我期待:
createdBy: string from email input,
paymentMethod: string from paymentMethod select input,
但我得到的是:
createdBy: null,
paymentMethod: null
接口
export interface BillingForm {
fullName: string;
email: string;
address: string;
city: string;
paymentMethod: string;
}
export interface Order {
id?: number;
companyId: number;
created: string;
createdBy: string;
paymentMethod: string;
totalPrice: number;
status: number;
orderRows: OrderRows[];
}
service.ts
public postOrder(order: Order): Observable<Order> {
console.log(order);
return this.http.post<Order>(this.ordersURL, order, httpOptions).pipe(
catchError(this.handleError('postOrder', order))
);
component.ts
ngOnInit() {
this.shippingForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
address: ['', Validators.required],
paymentMethod: ['', Validators.required],
city: ['', Validators.required],
})
}
onSubmit(billingForm: BillingForm) {
const order = this.newOrder(billingForm);
this.productService.postOrder(order).subscribe (
response => console.log('success', response),
error => console.log('error', error)
)
this.submitted = true;
if(this.shippingForm.invalid) {
return;
}
this.success = true;
}
newOrder(billingForm: BillingForm ): Order {
return {
companyId: 6,
created: moment().locale("sv").format("YYYY-MM-DDTLTS"),
createdBy: billingForm.email,
paymentMethod: billingForm.paymentMethod,
totalPrice: this.totalPrice,
status: 0,
orderRows: this.orderRows
}
}
get email() {
return this.shippingForm.get("email") as FormControl;
}
get paymentMethod() {
return this.shippingForm.get("paymentMethod") as FormControl;
}
component.html
<form [formGroup]="shippingForm" (ngSubmit)="onSubmit(billingForm)">
<h5 *ngIf="success">Your form is valid!</h5>
<div class="form-group col-md-6">
<label for="inputEmail">Email</label>
<input type="email" formControlName="email" class="form-control" id="inputEmail" placeholder="Email">
<div *ngIf="submitted && shippingForm.controls.email.errors" class="error">
<div *ngIf="shippingForm.controls.email.errors.required">Your email is required!</div>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="payment">Payment Method: </label>
<select type="select" formControlName="paymentMethod" class="form-control" id="payment"
aria-placeholder="Mastercard">
<option selected> Choose...</option>
<option *ngFor="let paymentMethod of paymentMethods">
{{ paymentMethod }}
</option>
</select>
<div *ngIf="submitted && shippingForm.controls.paymentMethod.errors" class="error">
<div *ngIf="shippingForm.controls.paymentMethod.errors.required">Your preferred payment method is required!</div>
</div>
</div>
</form>
newOrder(billingForm: BillingForm ): Order {
return {
companyId: 6,
created: moment().locale("sv").format("YYYY-MM-DDTLTS"),
createdBy: billingForm.email, // <--- HERE
paymentMethod: billingForm.paymentMethod, // <--- HERE
totalPrice: this.totalPrice,
status: 0,
orderRows: this.orderRows
}
}
這兩行依賴於billingForm
,似乎這個billingForm
沒有email
和paymentMethod
值。 記錄下來以確定。
<form [formGroup]="shippingForm" (ngSubmit)="onSubmit(billingForm)">
如果我錯了,請糾正我,但這個billingForm
沒有定義。 因此,使用undefined
作為參數調用onSubmit
方法。
shippingForm
已定義(並且它是連接到模板的那個),我猜你的意思是onSubmit(shippingForm)
。
嘗試使用newOrder函數中的以下代碼。
createdBy:billingForm。 價值 .email,
paymentMethod:billingForm。 價值 .paymentMethod,
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.