Как исправить ошибку «Невозможно прочитать свойство неопределенного» в почтовом запросе Angular

Я получаю эти ошибки, и я не знаю, как это исправить. Я делаю форму, которая будет делать почтовый запрос к API.

ОШИБКА TypeError: Не удается прочитать свойство «электронная почта» неопределенного

ОШИБКА TypeError: Не удается прочитать свойство «paymentMethod» неопределенного

Я ожидаю:

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>
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
1 697
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

  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 29.05.2019 13:36

@Nebula присвойте ему резервное значение: createdBy: billingForm.email: billingForm && billingForm.meail || 'defaultvalue'

user4676340 29.05.2019 13:37

Я получаю много красных подчеркиваний, когда пишу так. Я мог неправильно понять, что вы имели в виду

Nebula 29.05.2019 13:43
createdBy: billingForm && billingForm.meail || 'defaultvalue'. @Nebula, простите, забыл удалить первую часть!
user4676340 29.05.2019 13:46

хорошо, похоже, что это строка «значение по умолчанию», а не электронное письмо, которое я пишу в своей форме. Но по крайней мере ошибки исчезли. Что мне не хватает?

Nebula 29.05.2019 13:49

Понимаю. Так почему же он не принимает значения из формы?

Nebula 29.05.2019 13:53
<form [formGroup] = "shippingForm" (ngSubmit) = "onSubmit(billingForm)">

Поправьте меня, если я ошибаюсь, но это billingForm нигде не определено. Таким образом, метод onSubmit вызывается с undefined в качестве аргумента.

shippingForm определен (и он связан с шаблоном), я предполагаю, что вы имели в виду onSubmit(shippingForm).

Даже если я переключусь на «onSubmit (shippingForm)», результат тот же

Nebula 29.05.2019 13:39
Ответ принят как подходящий

Попробуйте использовать приведенный ниже код в функции newOrder.

createdBy: billingForm.стоимость.email,

метод оплаты: billingForm.стоимость.способ оплаты,

Свойство value не существует для типа BillingForm.

Nebula 29.05.2019 14:08

Если вам нужны значения из формы, которую вы отправляете, вы должны получить доступ к значениям формы доставки, например: this.shippingForm.value.email и this.shippingForm.value.paymentMethod.

Gowthamr.cs 29.05.2019 14:15

мой Бог! Это работает. Это было так очевидно! Большое спасибо за вашу помощь!

Nebula 29.05.2019 14:22

Другие вопросы по теме