时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“名称”。角 7

angular - TypeError：无法读取未定义的属性“名称”。角 7

问题描述

您好我正在尝试使用 Angular 7 提交一个只有一个字段的表单，但我在输入行上收到此错误：

错误类型错误：无法读取未定义的属性“名称”

我的 HTML 如下所示：

    <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)
  }
}

我知道组件的“服务”变量返回null，但是当我在 ngOnInit()函数中打印时不为null。我尝试使用该*ngIf="service"命令但没有成功，所以我不知道为什么会显示此错误。有人知道我在做什么错吗？

标签： angulartypescriptforms

解决方案

  1. 您正在尝试读取 的Name属性，该属性service.formData为空。

    而不是*ngIf="service"做，*nfIf="service.formData"

  2. 在resetForm您正在初始化的方法中this.service.formData，如果参数不为空。在ngOnInit()您调用该方法时不带参数，因此不会初始化 formData。你需要先初始化它。

推荐阅读