Reference error in angular 5 and .netcore - asp.net-core

Question

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/");
};

Answer 1

This is caused by that you did not initialize the this.user when loading this page.
Try this:
resetForm(form?: NgForm) {
if (this.user == undefined) {
this.user = new UserModel();
}
if (form != null) {
form.reset();
this.user = {
username: '',
password: ''
}
}
}