title: ERROR TypeError: Cannot set property 'username' of undefined
body: <p>I need to request my api (<a href="https://myurl.com/login" rel="nofollow noreferrer">https://myurl.com/login</a>) for login (username + password) in angular 7.3. When i use POST without user.models.ts i received a bad request error. When I use this model I have this error : "ERROR TypeError: Cannot set property 'username' of undefined."</p>
  
  <p>user.model.ts</p>
  
  <pre><code>export class User {
  constructor(public username: string,
              public password: string) {
      }
  }
  </code></pre>
  
  <p>login.component.ts:</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {NgForm} from '@angular/forms';
  import {HttpClient} from '@angular/common/http';
  import {LoginService} from '../services/login.service';
  import {User} from '../models/user.model';
  
  
  @Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit {
      user: User;
      constructor(private httpClient: HttpClient, private loginService: 
  LoginService) { }
      ngOnInit() {
      }
      onSubmit(form: NgForm) {
          this.user.username = form.value['login'];
          this.user.password = form.value['password'];
          this.loginService.LoginUser(this.user).subscribe(res =&gt; {
              console.log(res);
          });
      }
  }
  </code></pre>
  
  <p>login.service.ts:</p>
  
  <pre><code>import {User} from '../models/user.model';
  import { HttpClient, HttpHeaders} from '@angular/common/http';
  import { Observable, throwError } from 'rxjs';
  import {Injectable} from '@angular/core';
  
  @Injectable()
  export class LoginService {
      constructor(private http: HttpClient) { }
  
      LoginUser(user: User): Observable&lt;User&gt; {
          return this.http.post&lt;User&gt;('https://captn-boat-api.herokuapp.com/login', user)
          ;
      }
  }    
  </code></pre>
  
  <p>login.component.html</p>
  
  <pre><code>&lt;div class="login--already-registered"&gt;
        &lt;span class="login--screen-title"&gt;J'ai déjà un compte&lt;/span&gt;
  
        &lt;form class="login" method="GET" action="login" (ngSubmit)="onSubmit(f)" #f="ngForm"&gt;
  
          &lt;div class="input--field text dark"&gt;
            &lt;label for="login" class="control-label"&gt;&lt;svg class="icon icon-envelope"&gt;&lt;use xlink:href="#icon-envelope"&gt;&lt;/use&gt;&lt;/svg&gt; E-mail&lt;/label&gt;
            &lt;input id="login" name="login" type="text" placeholder="" value="" ngModel&gt;
  
          &lt;/div&gt;
  
          &lt;div class="input--field password dark"&gt;
            &lt;label for="password" class="control-label"&gt;&lt;svg class="icon icon-lock"&gt;&lt;use xlink:href="#icon-lock"&gt;&lt;/use&gt;&lt;/svg&gt; Mot de passe&lt;/label&gt;
            &lt;input id="password" name="password" type="password" placeholder="" value="" ngModel&gt;
  
          &lt;/div&gt;
  
          &lt;div class="input--field checkbox dark"&gt;
            &lt;label for="session"&gt;&lt;input id="session" name="" value="session" type="checkbox"&gt; se souvenir de moi&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="login--submit"&gt;
  
            &lt;button class="button button btn-submit" type="submit"&gt;
  </code></pre>