CODEWITHSUNDEEP
javascriptecmascript-6angularionic2
happycoder
happycoder

Reputation: 967

TypeError: Cannot read property 'username' of undefined?

I'm developing an application using Ionic 2 and getting below error. When I removed [(ngModel)]="register.username" error is disappearing. 

TypeError: Cannot read property 'username' of undefined in [register.username in RegisterPage@15:19]

<ion-navbar *navbar>
  <ion-title>Register</ion-title>
</ion-navbar>

<ion-content class="login-page">

  <ion-list>
    <div class="logo">
      <img src="img/appicon.svg">
    </div>

    <form #signupForm="ngForm" novalidate>
      <ion-item>
        <ion-label floating primary>Username</ion-label>
        <ion-input [(ngModel)]="register.username" ngControl="username" type="text" #username="ngForm" required>
        </ion-input>
      </ion-item>
      <p [hidden]="username.valid || submitted == false" danger padding-left>
        Username is required
      </p>

      <ion-item>
        <ion-label floating primary>Password</ion-label>
        <ion-input [(ngModel)]="register.password" ngControl="password" type="password" #password="ngForm" required>
        </ion-input>
      </ion-item>
      <p [hidden]="password.valid || submitted == false" danger padding-left>
        Password is required
      </p>

      <div padding>
        <button (click)="onSignup(signupForm)" type="submit" primary block>Create</button>
      </div>
    </form>
  </ion-list>

</ion-content>

register.js

import { App, Page, NavController } from 'ionic/ionic';
@Page({
  templateUrl: 'build/pages/register/register.html'
})

export class RegisterPage {
  constructor(nav: NavController) {
    this.nav = nav;
  }

  onSignup(form) {
    // console.log(form);
    // if (form.valid) {
    //   this.nav.push();
    // }
  }
}

Would like to know what I did wrong? any documentation I should read? (Please let me know if you want more information)

Upvotes: 1

Views: 5852

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202156

Perhaps your register object is loaded asynchronously. To prevent from this, simply use the Elvis operator: register?.username or use an ngIf around your form:

<form #signupForm="ngForm" novalidate *ngIf="register">
  <ion-item>
    <ion-label floating primary>Username</ion-label>
    <ion-input [(ngModel)]="register.username"
               ngControl="username" type="text"
               #username="ngForm" required>
    </ion-input>
  </ion-item>
  (...)
</form>

Edit

Setting the register object to an empty object shoud lfix your problem:

import { App, Page, NavController } from 'ionic/ionic';
@Page({
  templateUrl: 'build/pages/register/register.html'
})

export class RegisterPage {
  constructor(nav: NavController) {
    this.nav = nav;
    this.register = {};
  }

  onSignup(form) {
    // console.log(form);
    // if (form.valid) {
    //   this.nav.push();
    // }
  }
}

Hope it helps you, Thierry

Upvotes: 1

Related Questions