CODEWITHSUNDEEP
angulartypescriptforms
user8084037
user8084037

Reputation:

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

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?

Upvotes: 1

Views: 1699

Answers (2)

Sumit Parakh
Sumit Parakh

Reputation: 1143

You haven't initialized your formData object on component init.

Initialize it before resetForm in ngOnInit and your error should be gone.

ngOnInit() {
this.service.formData = {
        Id :0,
        Name :'',
        StudentSubjects :null
      }
this.resetForm();
}

Upvotes: 0

Zepa
Zepa

Reputation: 142

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

    Instead of *ngIf="service" do, *nfIf="service.formData"

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

Upvotes: 1

Related Questions