Ошибка TypeError: невозможно установить свойство "name" из неопределенного ANGULAR

Question

Я получаю эту ошибку при попытке отправить свою форму, раньше она работала нормально, через некоторое время при работе с какой-то другой функцией это, по-видимому, произошло. Оглядывался часами и пока не нашел решения. Я не знаю, почему это происходит, я попытался инициализировать компонент в конструкторе, а также в жизненном цикле ngoninit, но он все еще не работал. Я не могу понять, почему происходит эта ошибка, все должно работать, хотелось бы, чтобы кто-нибудь мог мне помочь.

Это ошибка, которую я получаю;

ERROR TypeError: Cannot set property 'name' of undefined at RecipeService.searchRecipes (recipe.service.ts:43) at RecipeSearchComponent.onSubmit (recipe-search.component.ts:33) at RecipeSearchComponent_Template_form_ngSubmit_8_listener (recipe-search.component.html:10) at executeListenerWithErrorHandling (core.js:21772) at wrapListenerIn_markDirtyAndPreventDefault (core.js:21814) at SafeSubscriber.schedulerFn [as _next] (core.js:37027) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49)

Это компонент

import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder } from '@angular/forms';
import { RecipeService } from '../recipe.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-recipe-search',
  templateUrl: './recipe-search.component.html',
  styleUrls: ['./recipe-search.component.scss']
})
export class RecipeSearchComponent implements OnInit {


    // initilization of the form
  searchForm = this.fb.group({
    name: ["", [Validators.required, Validators.minLength(3)]],
    minCalories: ["0", Validators.required],
    maxCalories: ["1500", Validators.required]
  });

  constructor(private recipeService: RecipeService, private router: Router, private fb: FormBuilder) {
  }

  ngOnInit(): void {
  }


  // submit function that calls the searchRecipes function from the recipe service
  onSubmit() {
    const minCalories = +this.searchForm.get("minCalories").value;
    const maxCalories = +this.searchForm.get("maxCalories").value;
    const name = this.searchForm.get("name").value;
    this.recipeService.searchRecipes(1, minCalories, maxCalories, name);
    this.router.navigate(["recipes"]);
  }
}

Это html

<section class="search">
  <div class="search__box">
    <div class="search__box--wrapper">
      <h1 class="search__box--title">Search</h1>
      <p class="search__box--paragraph">We Find Your Dream Recipes</p>
    </div>
  </div>

  <div class="search__form--box">
    <form class="search__form" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
      <div class="search__group search__group--title">
        <input
        placeholder="Enter Any Title..."
        class="search__input search__input--title"
        type="text"
        formControlName="name"
        required
        minlength="3"
        >

      <small
        class="search__input--title--small"
        [ngClass]="{'name--red': !searchForm['controls'].name.valid}"
        >
        Must be least 3 Characters long!
      </small>

        <label class="search__label search__label--title" for="title">Name</label>
      </div>
      <div class="search__calories--box">
        <div class="search__group search__group--calories">
          <input
          placeholder="Min Calories"
          type="number"
          class="search__input search__input--calories"
          formControlName="minCalories"
          required>
          <label class="search__label" for="minCalories">Min</label>
        </div>
        <div class="search__group search__group--calories">
          <input
          placeholder="Max Calories"
          type="number"
          class="search__input search__input--calories"
          formControlName="maxCalories"
          required
          >
          <label class="search__label" for="maxCalories">Max</label>
        </div>
      </div>
      <button type="submit" class="search__button" [disabled]="!searchForm.valid">Search</button>
    </form>
  </div>
</section>

Answer 1

У меня была проблема в службе рецепта, так что это на самом деле не имело ничего общего с формой, извините за поздний ответ. спасибо всем, кто смотрел и пробовал.

Answer 2

попробуйте это в вашем ngOnInit

    this.searchForm = this.fb.group({
    name: ["", Validators.compose([Validators.required, Validators.minLength(3)])],
    minCalories: ["0", Validators.required],
    maxCalories: ["1500", Validators.required]
  });