首页 文章

错误类型错误:提交登录表单时无法读取离子中未定义的属性“值”

提问于
浏览
1

我在我的离子应用程序中创建了一个登录页面,但是当我点击提交按钮时,我收到了此错误消息

错误 TypeError:无法读取未定义的属性“value”

错误图片

在此输入图像描述
.

这是我的完整 login.ts 代码,应该通过我在 php 中的 webservice 使用注册的用户名和密码登录。

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>

有人能指出我正确的方向吗?

谢谢。

1 回答

  • 1

    如果您仔细查看模板,则第二个输入密码会出错:

    <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();
    
        }
    
        });
    
        });
    
        }
    
        }
    
    }
    

相关问题