I'm trying to make an form in angular 7 and get inout in that but the form is giving the following error : ERROR TypeError: "_co.service.formData is undefined"

now here is my code for the html part of the ponent :-

<form (sumbit)="signUp(form)" autoplete="off" #form="ngForm">
  <div class="form-group">
     <input name="Name" class="form-control" #Name="ngModel"  [(ngModel)]="service.formData.Name"  required>
  </div>
</form>

while this is the type script code

import { Component, OnInit } from '@angular/core';
import {UserService} from '../../shared/user.service';
import {NgForm} from '@angular/forms';
@Component({
  selector: 'app-agent-signup',
  templateUrl: './agent-signupponent.html',
  styleUrls: ['./agent-signupponent.css']
})
export class AgentSignupComponent implements OnInit {

  constructor(private service:UserService) { }

  ngOnInit() {
  }
  signUp(form:NgForm)
  {

  }
}

and this is the code for user.service :-

import { Injectable } from '@angular/core';
import {UserData} from './user.model';
import {HttpClient} from '@angular/mon/http';
import {environment} from '../../environments/environment';
 const API_URL=environment.apiUrl;
@Injectable({
  providedIn: 'root'
})
export class UserService {
  formData : UserData;
  constructor(private http:HttpClient) {}

  createUser(formData:UserData)
  {
     return this.http.post(API_URL+'/user/signup',formData);
  }
}

and this is the the user.model class :-

export class UserData{

  public Email:string;
  public Password:string;
  public  Rera_no:string;
  public Name:string;
  public Company_name:string;
}

and i'm getting the following error :- ERROR TypeError: "_co.service.formData is undefined" can anybody tell me where i'm going wrong and how can i correct it ?

I'm trying to make an form in angular 7 and get inout in that but the form is giving the following error : ERROR TypeError: "_co.service.formData is undefined"

now here is my code for the html part of the ponent :-

<form (sumbit)="signUp(form)" autoplete="off" #form="ngForm">
  <div class="form-group">
     <input name="Name" class="form-control" #Name="ngModel"  [(ngModel)]="service.formData.Name"  required>
  </div>
</form>

while this is the type script code

import { Component, OnInit } from '@angular/core';
import {UserService} from '../../shared/user.service';
import {NgForm} from '@angular/forms';
@Component({
  selector: 'app-agent-signup',
  templateUrl: './agent-signup.ponent.html',
  styleUrls: ['./agent-signup.ponent.css']
})
export class AgentSignupComponent implements OnInit {

  constructor(private service:UserService) { }

  ngOnInit() {
  }
  signUp(form:NgForm)
  {

  }
}

and this is the code for user.service :-

import { Injectable } from '@angular/core';
import {UserData} from './user.model';
import {HttpClient} from '@angular/mon/http';
import {environment} from '../../environments/environment';
 const API_URL=environment.apiUrl;
@Injectable({
  providedIn: 'root'
})
export class UserService {
  formData : UserData;
  constructor(private http:HttpClient) {}

  createUser(formData:UserData)
  {
     return this.http.post(API_URL+'/user/signup',formData);
  }
}

and this is the the user.model class :-

export class UserData{

  public Email:string;
  public Password:string;
  public  Rera_no:string;
  public Name:string;
  public Company_name:string;
}

and i'm getting the following error :- ERROR TypeError: "_co.service.formData is undefined" can anybody tell me where i'm going wrong and how can i correct it ?

• javascript
• angular
• typescript
• angular7

• 1 where have you defined service.formData.Name ? – programoholic Commented Jan 27, 2019 at 19:13
• @programoholic please see the updated code – Atul kumar Commented Jan 27, 2019 at 19:31
• Can you provide a stackblitz? – Johan Rin Commented Jan 27, 2019 at 19:37
• @JohanRin stackblitz./edit/angular-kwhgmb – Atul kumar Commented Jan 28, 2019 at 12:03

3 Answers 3

you are initializing with the Class object but not creating it's object though. So do changes like this in your ponent

from

formData : UserData;

to

formData = new UserData();

in your template

<form (sumbit)="signUp(form)" autoplete="off" #form="ngForm">
  <div class="form-group">
     <input name="Name" class="form-control" #Name="ngModel"  [(ngModel)]="service.formData?.Name"  required>
  </div>
</form>

I hope this wil solve your issue

EDIT

you are using Object variable as ngModel which is not created in the Service yet. so try to initialize it first with empty string.

export class UserData{

  public Email:string;
  public Password:string;
  public  Rera_no:string;
  public Name: string = '';
  public Company_name:string;
}

I think it is because you need to call method from service UserService in ponent with form AgentSignupComponent . So you need to call createUser method in AgentSignupComponent;

import { Component, OnInit } from '@angular/core';
import {UserService} from '../../shared/user.service';
import {NgForm} from '@angular/forms';
@Component({
  selector: 'app-agent-signup',
  templateUrl: './agent-signup.ponent.html',
  styleUrls: ['./agent-signup.ponent.css']
})
export class AgentSignupComponent implements OnInit {

  constructor(private service:UserService) { } //You use DI this but dont call method;

  ngOnInit() {
  }
  signUp(form:NgForm) {
    this.service.createUser(form); 
  }
}

Write a console.log(service); in your InOnInit() function of your AgentSignupComponent class. Observe what properties you can see in your console. This error means it cannot access the UserData object in your formData variable. So you need to initiate a UserData object and assign a value to the variable. Change formData : UserData; to formData = new UserData();