Reference error in angular 5

1

I’m trying to do a simple form post to my controller but I keep getting the following error : cannot access username of undefined. As far as i can tell i’m initializing the usermodel in my login component but have no idea why it’s still erroring.

Does anyone have any ideas?

html

   <form #loginForm="ngForm" (ngSubmit) ="OnSubmit(loginForm)">
  <div class="form-row">
    <div class="form-group col-md-6">
      <input type="text" name="username" #username="ngModel" [(ngModel)]="user.username" class="form-control" />
    </div>
    <div class="form-group col-md-6">
      <input type="text" name="password" #password="ngModel" [(ngModel)]="user.password" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-block btn-lg">login</button>
  </div>

user.model.ts

export class UserModel {
  username: string;
  password: string;
}

user.service.ts

    import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserModel } from './user.model';
import { Inject, Injectable } from '@angular/core';

@Injectable()
export class UserService {
  constructor(private http: HttpClient) { }


  postUser(user: UserModel, @Inject('BASE_URL') baseUrl: string) {
    return this.http.post(baseUrl + '/Test/Register', new HttpHeaders({ 'username': user.username, 'password': user.password })).subscribe(result => {
      console.error(result)
    }, error => console.error(error));
  }

login.component.ts

  import { Component, Inject, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserModel } from './user.model';
import { UserService } from './user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent implements OnInit {

  user: UserModel

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.resetForm();
  }
  resetForm(form?: NgForm) {
    if (form != null) {
    form.reset();
      this.user = {
      username: '',
      password: ''
      }
    }
  }

  onSubmit(form: NgForm) {
    this.userService.postUser(form.value, "https://localhost:44327/");
  };
2

I played with your code a bit in StackBlitz and I trhink that your resetForm is the issue.

  this.user = {
      username: '',
      password: ''
      }

This code is never getting called.
When you call resetForm() in your ngOnInit, form is undefined. Because you are not using strict equality, form != null will be false and no action will be performed by resetForm. This means that user is never created and is undefined. If you change to strict equality, you will get a new error because you will be attempting to call reset() on undefined.

1 Like
3

So the problem was the following lines

postUser(user: UserModel, @Inject(‘BASE_URL’) baseUrl: string)
the error removed itself when i changed it to
postUser(user: UserModel, baseUrl: string)

and i was calling [NgSubmit] = OnSubmit(form) but in my component i had a function called onSubmit so that was erroring too.

Your comment did put me on a different path, because i got a different error when i removed the reset form function and then that lead me to the post function.

Thanks for the effort !

4

Good job tracking it down! Happy coding.