TypeError: Cannot read property 'Name' of undefined. Angular 7

Question

Hi I'm trying to submit a form that only have one field using Angular 7 but I'm getting this error on the Input line:

ERROR TypeError: Cannot read property 'Name' of undefined

My HTML looks like this:

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

I have a component that looks like this:

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

And a Service like this:

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

I understand that the "service" variable of the component is returning null, but when I printed in the ngOnInit() function is not null. I've tried to use the *ngIf="service" command with no success, so I don´t know why this error is showing. Somebody knows what am I doing wrong?

@ConnorsFan When I do that, the error disappears, but my form disappears as well. — user8084037
why do you have service calls in your template? this is a crime — AlleXyS

Zepa Zepa · Accepted Answer · 2020-01-10T21:36:08

You are trying to read the Name property of the service.formData, which is null.

Instead of *ngIf="service" do, *nfIf="service.formData"
In the resetForm method you are initializing the this.service.formData only, if the argument is not null. In the ngOnInit() you are calling that method without parameters, so the formData will not be initialized. You need to initialize it first.

TypeError: Cannot read property 'Name' of undefined. Angular 7

2 Answers