[英]"ERROR TypeError: Cannot read property 'name' of undefined" in Angular 6
[英]Error TypeError: cannot set property “name” of undefined ANGULAR
我在尝试提交表单时收到此错误,它曾经可以正常工作,但在处理其他一些功能后,这显然发生了。 环顾了几个小时,还没有找到解决方案。 我不知道为什么会这样,我尝试在构造函数以及 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>
在你的 ngOnInit 中试试这个
this.searchForm = this.fb.group({
name: ["", Validators.compose([Validators.required, Validators.minLength(3)])],
minCalories: ["0", Validators.required],
maxCalories: ["1500", Validators.required]
});
我的服务有问题,菜谱服务,所以这实际上与表格无关,抱歉回复晚了。 感谢所有观看和尝试的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.