1

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?

Improve this question
3
  • Did you try *ngIf="service.formData"? Commented Jan 10, 2020 at 21:27
  • @ConnorsFan When I do that, the error disappears, but my form disappears as well. Commented Jan 10, 2020 at 21:33
  • why do you have service calls in your template? this is a crime Commented Jan 10, 2020 at 21:46

2 Answers 2

Reset to default
1

  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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I tried this. And the error disappears but the text field disappears as well.
@YesidBejaranoCamacho I have updated, my answer. Please, check it.
0

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();
}
Improve this answer

Comments