Angular forms returning ERROR TypeError: "_co.service.formData is undefined"?

'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 component :-

<form (sumbit)="signUp(form)" autocomplete="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.component.html', styleUrls: ['./agent-signup.component.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/common/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 ?

Comments (4)

Biplab Malakar's photo
<form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> 
    <div class="form-group"> 
       <input name="Name" class="form-control" [(ngModel)]="service.formData.Name" required> 
  </div> 
</form>
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.component.html', 
    styleUrls: ['./agent-signup.component.css'] 
}) 
export class AgentSignupComponent implements OnInit {
   constructor(public service:UserService) { }
   ngOnInit() { } 
   signUp(form:NgForm) { }
}

User service

import { Injectable } from '@angular/core';
import {UserData} from './user.model'; 
import {HttpClient} from '@angular/common/http'; 
import {environment} from '../../environments/environment'; 
const API_URL=environment.apiUrl; 
@Injectable({ providedIn: 'root' }) 
export class UserService { 
  formData : UserData = new  UserData();// you needto be  init with default value other wise formData doesn't have anything.
  constructor(private http:HttpClient) {}
  createUser(formData:UserData) { 
     return this.http.post(API_URL+'/user/signup',formData); 
   }
}

model

export class UserData{
   public Email:string = '';  // field with default value
   public Password:string = ''; 
   public Rera_no:string =''; 
   public Name:string = ''; 
   public Company_name:string = ''; 
}