我在我的 ionic 应用程序中创建了一个登录页面，但是每当我点击提交按钮时，我都会收到此错误消息
ERROR TypeError: Cannot read property 'value' of undefined
错误图片
.
这是我的完整 login.ts 代码，它应该通过我在 php 中的网络服务使用注册的用户名和密码登录。
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { RegisterPage } from '../register/register';
import {Http, Headers, RequestOptions} from "@angular/http";
import { LoadingController } from 'ionic-angular';
import 'rxjs/add/operator/map';
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
@ViewChild("username") username;
@ViewChild("password") password;
data:string;
constructor(public navCtrl: NavController, public alertCtrl: AlertController,
private http: Http, public loading: LoadingController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
registerPage(){
this.navCtrl.push(RegisterPage);
}
signIn(){
//// check to confirm the username and password fields are filled
if(this.username.value=="" ){
let alert = this.alertCtrl.create({
title:"ATTENTION",
subTitle:"Username field is empty",
buttons: ['OK']
});
alert.present();
} else
if(this.password.value==""){
let alert = this.alertCtrl.create({
title:"ATTENTION",
subTitle:"Password field is empty",
buttons: ['OK']
});
alert.present();
}
else
{
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
let data = {
username: this.username.value,
password: this.password.value
};
let loader = this.loading.create({
content: 'Processing, please wait…',
});
loader.present().then(() => {
this.http.post('http://localhost:90/totallight/api/login.php',data,options)
.map(res => res.json())
.subscribe(res => {
console.log(res)
loader.dismiss()
if(res=="Your Login success"){
let alert = this.alertCtrl.create({
title:"CONGRATS",
subTitle:(res),
buttons: ['OK']
});
alert.present();
}else
{
let alert = this.alertCtrl.create({
title:"ERROR",
subTitle:"Your Login Username or Password is invalid",
buttons: ['OK']
});
alert.present();
}
});
});
}
}
}
login.html
<ion-header >
<ion-navbar class="header">
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="loginpages">
<ion-grid>
<ion-row>
<ion-col col-12 class="divme">
<ion-input round type="text" placeholder="Username" name="username" #username></ion-input>
</ion-col>
<ion-col col-12 class="divme">
<ion-input round type="password" placeholder="Password" name="password" #username></ion-input>
</ion-col>
</ion-row>
<ion-row justify-content-start class="drow">
<ion-col col-6 class="col">
<div> <button ion-button round block (click)="signIn()">Sign In</button></div>
</ion-col>
<ion-col col-6 class="col">
<div><button ion-button round (click)="registerPage()">Register</button></div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
有人能指出我正确的方向吗？
谢谢。
最佳答案
如果您仔细查看您的模板，您输入的第二个密码有误:
<ion-row>
<ion-col col-12 class="divme">
<ion-input round type="text" placeholder="Username" name="username" #username></ion-input>
</ion-col>
<ion-col col-12 class="divme">
<ion-input round type="password" placeholder="Password" name="password" #password></ion-input>
</ion-col>
</ion-row>
然后在你的Ts代码中:
constructor(public navCtrl: NavController, public alertCtrl: AlertController,
private http: Http, public loading: LoadingController, public navParams: NavParams) {
}
ionViewAfterViewInit() {
this.username.nativeElement.value=="" ;
this.password.nativeElement.value==""
}
registerPage(){
this.navCtrl.push(RegisterPage);
}
signIn(){
//// check to confirm the username and password fields are filled
if(this.username.nativeElement.value=="" ){
let alert = this.alertCtrl.create({
title:"ATTENTION",
subTitle:"Username field is empty",
buttons: ['OK']
});
alert.present();
} else
if(this.password.nativeElement.value==""){
let alert = this.alertCtrl.create({
title:"ATTENTION",
subTitle:"Password field is empty",
buttons: ['OK']
});
alert.present();
}
else
{
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
let data = {
username: this.username.nativeElement.value ,
password: this.password.nativeElement.value
};
let loader = this.loading.create({
content: 'Processing, please wait…',
});
loader.present().then(() => {
this.http.post('http://localhost:90/totallight/api/login.php',data,options)
.map(res => res.json())
.subscribe(res => {
console.log(res)
loader.dismiss()
if(res=="Your Login success"){
let alert = this.alertCtrl.create({
title:"CONGRATS",
subTitle:(res),
buttons: ['OK']
});
alert.present();
}else
{
let alert = this.alertCtrl.create({
title:"ERROR",
subTitle:"Your Login Username or Password is invalid",
buttons: ['OK']
});
alert.present();
}
});
});
}
}
}
关于javascript - 错误类型错误 : Cannot read property 'value' of undefined in ionic when submitting login form，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51226877/