Angular TypeError:无法读取属性';名称';未定义的。角度7
您好,我正在尝试使用Angular 7提交一个只有一个字段的表单,但我在输入行中遇到以下错误: 错误类型错误:无法读取未定义的属性“Name” 我的HTML如下所示:Angular TypeError:无法读取属性';名称';未定义的。角度7,angular,typescript,forms,Angular,Typescript,Forms,您好,我正在尝试使用Angular 7提交一个只有一个字段的表单,但我在输入行中遇到以下错误: 错误类型错误:无法读取未定义的属性“Name” 我的HTML如下所示: <form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)"> <input type="hidden" name="Id" [value]="service.formData.Id"> <div class
<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
<input type="hidden" name="Id" [value]="service.formData.Id">
<div class="form-group" >
<div class="input-group" *ngIf="service">
<div class="input-group-prepend">
<div class="input-group-text bg.white">
<i class="fas fa-user" [class.green-icon]="Name.valid" [class.red-icon]="Name.invalid && Name.touched"></i>
</div>
</div>
<input name="Name" #Name="ngModel" [(ngModel)]="service.formData.Name" class="form-control" placeholder="Student Name" required maxlength="50">
</div>
</div>
<hr>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block" type="submit"><i class="fas fa-database"></i> Submit</button>
</div>
</form>
import { Component, OnInit } from '@angular/core';
import { StudentDetailService } from 'src/app/shared/student-detail.service';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-student-detail',
templateUrl: './student-detail.component.html',
styles: []
})
export class StudentDetailComponent implements OnInit {
constructor(private service:StudentDetailService) { }
ngOnInit() {
this.resetForm();
}
resetForm(form?:NgForm)
{
if(form !=null){
form.resetForm();
this.service.formData = {
Id :0,
Name :'',
StudentSubjects :null
}
}
}
onSubmit(form:NgForm)
{
this.service.postStudentDetail(form.value).subscribe(
res => {
this.resetForm(form);
},
err => {
console.log(err)
}
);
}
}
import { Injectable } from '@angular/core';
import { StudentDetail } from './student-detail.model';
import {HttpClient} from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class StudentDetailService {
formData :StudentDetail;
readonly rootURL = 'http://localhost:31047/api';
constructor(private http: HttpClient) { }
postStudentDetail(formData:StudentDetail)
{
return this.http.post(this.rootURL+'/StudentDetail',formData)
}
}
还有这样的服务:
<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
<input type="hidden" name="Id" [value]="service.formData.Id">
<div class="form-group" >
<div class="input-group" *ngIf="service">
<div class="input-group-prepend">
<div class="input-group-text bg.white">
<i class="fas fa-user" [class.green-icon]="Name.valid" [class.red-icon]="Name.invalid && Name.touched"></i>
</div>
</div>
<input name="Name" #Name="ngModel" [(ngModel)]="service.formData.Name" class="form-control" placeholder="Student Name" required maxlength="50">
</div>
</div>
<hr>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block" type="submit"><i class="fas fa-database"></i> Submit</button>
</div>
</form>
import { Component, OnInit } from '@angular/core';
import { StudentDetailService } from 'src/app/shared/student-detail.service';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-student-detail',
templateUrl: './student-detail.component.html',
styles: []
})
export class StudentDetailComponent implements OnInit {
constructor(private service:StudentDetailService) { }
ngOnInit() {
this.resetForm();
}
resetForm(form?:NgForm)
{
if(form !=null){
form.resetForm();
this.service.formData = {
Id :0,
Name :'',
StudentSubjects :null
}
}
}
onSubmit(form:NgForm)
{
this.service.postStudentDetail(form.value).subscribe(
res => {
this.resetForm(form);
},
err => {
console.log(err)
}
);
}
}
import { Injectable } from '@angular/core';
import { StudentDetail } from './student-detail.model';
import {HttpClient} from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class StudentDetailService {
formData :StudentDetail;
readonly rootURL = 'http://localhost:31047/api';
constructor(private http: HttpClient) { }
postStudentDetail(formData:StudentDetail)
{
return this.http.post(this.rootURL+'/StudentDetail',formData)
}
}
我知道组件的“service”变量返回null,但当我在ngOnInit()
函数中打印时,该变量不为null。我尝试使用*ngIf=“service”
命令但没有成功,因此我不知道为什么会显示此错误。有人知道我做错了什么
服务.formData
的名称
属性,该属性为空
而不是*ngIf=“service”
do,*nfIf=“service.formData”
resetForm
方法中,仅当参数不为null时,才初始化this.service.formData
。在ngOnInit()
中,您正在调用不带参数的方法,因此formData将不会初始化。你需要先初始化它您尚未在component init上初始化formData对象 在ngOnInit中重置表单之前初始化它,您的错误应该消失
ngOnInit() {
this.service.formData = {
Id :0,
Name :'',
StudentSubjects :null
}
this.resetForm();
}
您是否尝试过
*ngIf=“service.formData”
?@ConnorsFan当我这样做时,错误消失了,但我的表单也消失了。为什么您的模板中有服务调用?这是克里米亚人试过的。错误消失了,但文本字段也消失了。@YesidBejaranoCamacho我已经更新了,我的答案。请检查一下。