[英]TypeError: Cannot read property 'username' of undefined?
I'm developing an application using Ionic 2 and getting below error. 我正在使用Ionic 2开发应用程序,但出现错误。 When I removed [(ngModel)]="register.username" error is disappearing.
当我删除[(ngModel)] =“ register.username”时,错误消失了。
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 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)
(如果需要更多信息,请告诉我)
Perhaps your register
object is loaded asynchronously. 也许您的
register
对象是异步加载的。 To prevent from this, simply use the Elvis operator: register?.username
or use an ngIf
around your form: 为避免这种情况,只需使用Elvis运算符:
register?.username
或在ngIf
周围使用ngIf
:
<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: 将
register
对象设置为空对象应该解决您的问题:
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 希望对您有帮助,蒂埃里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.