[IONIC、javascript、HTML、cordova]で入力テキストチェンジャーを取得するには

Question

私はJavaScriptを学び始めています。 私は教会を休んでいますが、ディレクトリとフォルダが同じでないようにIONICのバージョンが更新されました。また、テンプレートにチェンジャーがあります。アプリの各ページについては

、私が持っている：1 * .htmlを、1 * .scssとと* .TS（NOT * .jsファイル）

は、だから私は、アプリをdeveloppeするdificutlyいくつかを持っています。 関数を追加しようとしましたが、この関数は変更後に "username"の値を取得し、警告ポップアップを使って表示します 実際には私のコードはusernameのテキスト値を表示しますが、 'popup show "username =＃"

このように、属性aはデフォルト値ではなく現在の値を取得するために使用できます。

注：IONICの最後のバージョンとの良好なコース/ tutorielを持っている場合は、私が興味を持っています;）

HTMLのlogin.htmlとの一部

<ion-header> 
    <ion-navbar> 
     <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
     <ion-title>Login</ion-title> 
    </ion-navbar> 
<!-- <script src="login.js"></script>--> 
</ion-header> 

<ion-content padding> 

    <form id="myForm"> 
     <input id="username" title="Username" type="text" placeholder="Username" value="#" (change)="testUserName()" > 
    </form> 

</ion-content> 

スクリプトlogin.ts

の一部

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

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 

export class LoginPage { 
    constructor(public navCtrl: NavController) {  
    } 
    public testUserName(): void { 
     var username = document.getElementById('username'); 
     alert('username = '+ username.getAttribute("value")); 
    } 
} 

Answer 1

あなたは、.jsファイルではなく、typescript（.ts）を使用するIonic 3アプリケーションを使用していると思います。 IONIC 3フレームワークは、タイプスクリプトと角度2/4の上で動作します。したがって、入力値の変更された値を取得するには、htmlビューをコンポーネントファイル（tsファイル）にバインドすることができます。 NgModelを使用してバインディングを実行できます。これを試してみてください：

.TSで

<form id="myForm"> 
    <input id="username" title="Username" type="text" placeholder="Username" [(ngModel)]="userName" (change)="testUserName()" > 
</form> 

は

export class LoginPage { 
userName:string; // you can also give default value here 
constructor(public navCtrl: NavController) {  
} 
public testUserName(): void { 
    alert('username = '+this.userName); // see same ngModel binded in HTML 
} 
    } 

はそれが役立ちます:)

Answer 2

ホープファイルをたくさんありがとう、それは非常に有用だった:)
私は "名前" attribueを追加する必要がありますhtmlファイル。 * .TSで

<form id="myForm"> 
    <input id="username" title="Username" type="text" placeholder="Username" [(ngModel)]="userName" name="username" (change)="testUserName()" > 
</form> 

* .htmlのファイルで

たくさんありがとうござい

export class LoginPage { 
    userName: string; // you can also give default value here 
    constructor(public navCtrl: NavController) { } 
    public testUserName(): void { 
     alert('username = ' + this.userName); // see same ngModel binded in HTML 
    } 
}