title: Angular 6 TypeError: Cannot read property 'username' of undefined
body: <p>I'm new to Angular 6 and did the Angular Get started tutorial.</p>
  
  <p>However, what I want to do in my case is not explained in this tutorial.</p>
  
  <p>I want to be able to populate an entity with a form in my template, to send this populated entity to my API's user registration method.</p>
  
  <p>I get the error in the title: (same error with nmUser.username or NmUser.username)</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'username' of undefined</p>
  </blockquote>
  
  <p>What am I doing wrong ?</p>
  
  <p>Here's my template:</p>
  
  <pre><code>&lt;ion-content&gt;
    &lt;ion-list&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label color="orange" floating&gt;Pseudo&lt;/ion-label&gt;
        &lt;ion-input [(ngModel)]="NmUser.username" type="text" name="pseudo"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label color="orange" floating&gt;Email&lt;/ion-label&gt;
        &lt;ion-input [(ngModel)]="nmUser.email" type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label color="orange" floating&gt;Mot de passe&lt;/ion-label&gt;
        &lt;ion-input [(ngModel)]="nmUser.password" color="orange" type="password" name="password" pattern=".{6,}"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item style="margin-top: 5%" no-lines&gt;
        &lt;ion-label color="orange"&gt;Lieu de travail&lt;/ion-label&gt;
        &lt;ion-select [(ngModel)]="nmUser.workplace"&gt;
          &lt;ion-option value="Mc_Donald's_Monaco"&gt;McDo Monaco&lt;/ion-option&gt;
          &lt;ion-option value="BK_Monaco"&gt;BK Monaco&lt;/ion-option&gt;
          &lt;ion-option value="SoGreen"&gt;SoGreen&lt;/ion-option&gt;
          &lt;ion-option value="Decathlon"&gt;Decathlon&lt;/ion-option&gt;
          &lt;ion-option value="La_Boule_Noire"&gt;La Boule Noire&lt;/ion-option&gt;
          &lt;ion-option value="High_Club"&gt;High Club&lt;/ion-option&gt;
        &lt;/ion-select&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label color="orange" floating&gt;Intitulé du poste&lt;/ion-label&gt;
        &lt;ion-input [(ngModel)]="nmUser.job" color="orange" type="text" name="job"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item style="margin-top: 5%" no-lines&gt;
        &lt;ion-label color="orange"&gt;Afficher mon lieu de travail&lt;/ion-label&gt;
        &lt;ion-toggle [(ngModel)]="nmUser.showJob"&gt;&lt;/ion-toggle&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item style="margin-top: 5%" no-lines&gt;
        &lt;ion-label color="orange"&gt;Recevoir des emails automatiques&lt;/ion-label&gt;
        &lt;ion-toggle&gt;&lt;/ion-toggle&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item style="margin-top: 5%" no-lines&gt;
        &lt;ion-label color="orange"&gt;J'ai lu et j'accepte les &lt;span class="cgu"&gt;CGU&lt;/span&gt;&lt;/ion-label&gt;
        &lt;ion-toggle&gt;&lt;/ion-toggle&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item style="margin-top: 5%" no-lines&gt;
        &lt;button ion-button color="orange" outline block large style="margin-top: 5%;" (click)="register()"&gt;S'inscrire&lt;/button&gt;
      &lt;/ion-item&gt;
  
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Here's my RegisterPage:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { NmUserService } from '../../app/entities/nmUser/nmUser.service';
  import { NmUser } from './nmUser';
  
  @Component({
    selector: 'page-register',
    templateUrl: 'register.html',
    providers: [NmUserService]
  })
  export class RegisterPage {
  
    constructor(private navCtrl: NavController, private userService: NmUserService) {
  
    }
  
    register(user: NmUser): void {
      this.userService.add(user).subscribe(
          (result) =&gt; {
              // This code will be executed when the HTTP call returns successfully
          },
          (error) =&gt; {
              console.log(error);
          }
      );
    }
  
  }
  </code></pre>
  
  <p>Here's my UserService:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
  import { MessageService } from '../../message.service';
  import { NmUser } from './nmUser';
  import { Observable } from 'rxjs/Rx';
  import { catchError, map } from 'rxjs/operators';
  import 'rxjs/add/observable/throw';
  
  const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  
  @Injectable()
  export class NmUserService {
  
      private userUrl = 'http://my-api.com/api/user/';
  
      constructor(private http: HttpClient, private messageService : MessageService) {}
  
      /**
       * Create the passe nmUser.
       */
      add(nmUser : NmUser) : Observable&lt;NmUser&gt; {
          let body = nmUser;
  
          return this.http.post(this.userUrl, body)
              .pipe(
                  map(response =&gt; new NmUser(response)),
                  catchError(this.handleError)
              );
      }
  }
  </code></pre>
  
  <p>Here's my User entity:</p>
  
  <pre><code>import {NmWorkplace} from '../nmWorkplace/nmWorkplace';
  
  export class NmUser {
      // Raw attributes
      id : number;
      email : string;
      username : string;
      profileImageUrl : string;
      password : string;
      job : string;
      showJob : boolean;
      note : number;
      points : number;
      roles : string;
      salt : string;
      status : string;
      createdAt : Date;
      updatedAt : Date;
      deletedAt : Date;
      notificationsActivated : boolean;
      connected : boolean;
      // x-to-one
      workplace : NmWorkplace;
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks !</p>