Я получаю эти ошибки, и я не знаю, как это исправить. Я делаю форму, которая будет делать почтовый запрос к 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[];
}
сервис.тс
public postOrder(order: Order): Observable<Order> {
console.info(order);
return this.http.post<Order>(this.ordersURL, order, httpOptions).pipe(
catchError(this.handleError('postOrder', order))
);
компонент.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.info('success', response),
error => console.info('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;
}
компонент.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
. Зарегистрируйте это, чтобы быть уверенным.
@Nebula присвойте ему резервное значение: createdBy: billingForm.email: billingForm && billingForm.meail || 'defaultvalue'
Я получаю много красных подчеркиваний, когда пишу так. Я мог неправильно понять, что вы имели в виду
createdBy: billingForm && billingForm.meail || 'defaultvalue'
. @Nebula, простите, забыл удалить первую часть!
хорошо, похоже, что это строка «значение по умолчанию», а не электронное письмо, которое я пишу в своей форме. Но по крайней мере ошибки исчезли. Что мне не хватает?
Понимаю. Так почему же он не принимает значения из формы?
<form [formGroup] = "shippingForm" (ngSubmit) = "onSubmit(billingForm)">
Поправьте меня, если я ошибаюсь, но это billingForm
нигде не определено. Таким образом, метод onSubmit
вызывается с undefined
в качестве аргумента.
shippingForm
определен (и он связан с шаблоном), я предполагаю, что вы имели в виду onSubmit(shippingForm)
.
Даже если я переключусь на «onSubmit (shippingForm)», результат тот же
Попробуйте использовать приведенный ниже код в функции newOrder.
createdBy: billingForm.стоимость.email,
метод оплаты: billingForm.стоимость.способ оплаты,
Свойство value не существует для типа BillingForm.
Если вам нужны значения из формы, которую вы отправляете, вы должны получить доступ к значениям формы доставки, например: this.shippingForm.value.email и this.shippingForm.value.paymentMethod.
мой Бог! Это работает. Это было так очевидно! Большое спасибо за вашу помощь!
Как бы вы предложили мне поступить?