ERROR TypeError: Cannot read property 'formData' of undefined

Question

this is the error I'm getting in chrome:

UserComponent.html:7 ERROR TypeError: Cannot read property 'formData' of undefined at Object.eval [as updateDirectives] (UserComponent.html:7) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911) at checkAndUpdateView (core.js:23307) at callViewAction (core.js:23548) at execComponentViewsAction (core.js:23490) at checkAndUpdateView (core.js:23313) at callViewAction (core.js:23548) at execComponentViewsAction (core.js:23490) at checkAndUpdateView (core.js:23313) at callViewAction (core.js:23548)

I'm trying to do 2 way data binding with ngForm.

User.model.ts:

export class User {

 Id: number;
    UserName: string;
    FullName: string;
    MultipleRoles: string;
    Status: string;
    CreateDate: Date;
    CreateBy: string;
}

User.service.ts:

import { Injectable } from '@angular/core';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})

export class UserService {
  formData: User;
  constructor() { }
}

user.component.html

<form #form = "ngForm">
  <div class="form-group">
    <label> USERNAME</label>
    <input name="UserName" #UserName="ngModel" [(ngModel)]="UserService.formData.UserName" class="form-control">
  </div>

  <div class="form-group">
      <label> FULLNAME</label>
      <input name="FullName" #FullName="ngModel" [(ngModel)]="UserService.formData.FullName" class="form-control">
    </div>

      <div class="form-group">
          <label> MULTIPLE ROLES</label>
          <input name="MultipleRoles" #MultipleRoles="ngModel" [(ngModel)]="UserService.formData.MultiplesRoles" class="form-control">
        </div>

        <div class="form-group">
            <label> STATUS</label>
            <input name="Status" #Status="ngModel" [(ngModel)]="UserService.formData.Status" class="form-control">
          </div>

  <div class ="form-row">
    <div class="form-group col-md-6">
              <label> Create Date</label>
              <input name="CreateDate" #CreateDate="ngModel" [(ngModel)]="UserService.formData.CreateDate" class="form-control">
            </div>

            <div class="form-group col-md-6">
                <label> Create By</label>
                <input name="CreateBy" #CreateBy="ngModel" [(ngModel)]="UserService.formData.CreateBy" class="form-control">
              </div>

    </div>
  <div class="form-group">
    <input type="button" value="SUBMIT" class="btn btn-lg btn-block">
  </div>
  </form>

user.component.ts:

import { Component,OnInit} from '@angular/core';

import { UserService } from 'src/app/shared/user.service';
import { FormsModule} from '@angular/forms';
import { FormGroup, FormControl} from '@angular/forms';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  // constructor created to use user service class
  constructor( private service: UserService) { }

  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { UserComponent } from './users/user/user.component';


import { UserListComponent } from './users/user-list/user-list.component';
import { UserService } from './shared/user.service';
import { FormsModule} from '@angular/forms';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
    UserComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I'm really really new in angular7 and trying to create a user form. Any help is much appreciated.

Prashant Pimpale Prashant Pimpale · Accepted Answer · 2019-06-15T09:12:35

In UserService create an instance like this:

formData = new User();

and in UserService add private access modifier:

             \/\/\/
constructor(private UserService: UserService) {
  // code
}

Working_Demo

ERROR TypeError: Cannot read property 'formData' of undefined

2 Answers