如何在Ionic上获取ngModel值?

时间:2018-06-14 15:03:29

标签: angular ionic3 hybrid-mobile-app angular-ngmodel mobile-development

我尝试使用ngModel将输入值从html传递到ts文件。但是我收到了一个错误。这是我的代码,错误和版本。

signup.html
<ion-content padding>
<ion-label color="black" stacked>Ad - Soyad</ion-label>
<ion-input type="text" id="name_surname"  [(ngModel)]="name" name='name'></ion-input>
<ion-label color="black" stacked>Kullanıcı Adı</ion-label>
<ion-input type="text" id="username" [(ngModel)]="username" name='username'></ion-input>
<ion-label color="black" stacked>Kullanıcı Mail Adresi</ion-label>
<ion-input type="email" id="email" [(ngModel)]="email" name='email'></ion-input>
<ion-label color="black" stacked>Kullanıcı Şifresi</ion-label>
<ion-input type="password" id="password" [(ngModel)]="password" name='password'></ion-input>
<ion-label color="black" stacked>Kullanıcı Şifresi - Tekrardan</ion-label>
<ion-input type="password" id="password_control" [(ngModel)]="password_control" name='password_control'></ion-input>
<ion-label color="black" stacked>Kullanıcı Tipi</ion-label>
<ion-input type="text" id="type" [(ngModel)]="type" name='type'></ion-input>
<button ion-button full (click)='signupHTTP()' id="signupButton">Giriş Yap</button>
</ion-content>

这是我的ts文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';


import { RequestServiceProvider } from '../../providers/request-service/request-service';



@IonicPage()
@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient, private requestService : RequestServiceProvider) {
  }

  signupHTTP(){
     console.log(this.name);
  }
}

Error Screenshot

My versions

1 个答案:

答案 0 :(得分:0)

您必须将这些变量定义为类的属性,它们不能无处出现。

export class SignupPage {
  name: string = 'initialName';
  username: string = 'initialUserName';
  ...