浮動ラベル、結果を得る方法.ts？

Question

私は簡単な質問がありますが、解決できません。私は.TSファイルにユーザー名とパスワードを取得できますか

<ion-list> 
       <ion-item> 
        <ion-label floating >Username</ion-label> 
        <ion-input type="text" ></ion-input> 

       </ion-item> 

       <ion-item> 
        <ion-label floating>Password</ion-label> 
        <ion-input type="password"></ion-input> 
       </ion-item> 
</ion-list> 

：私はこのように私の.htmlで浮動ラベルを持っていますか？ ありがとうございます！

よろしくお願いいたします。だから、コード内であなたが値にアクセスするusernameとpasswordプロパティを使用することができます

@Component({ 
    templateUrl:"home.html" 
}) 
export class HomePage { 

    private username: string; 
    private password: string; 

    constructor() { 

    } 
} 

：あなたはin Angular docs

<ion-list> 
    <ion-item> 
    <ion-label floating >Username</ion-label> 
    <ion-input [(ngModel)]="username" name="username" type="text" ></ion-input> 
    </ion-item> 

    <ion-item> 
    <ion-label floating>Password</ion-label> 
    <ion-input [(ngModel)]="password" name="password" type="password"></ion-input> 
    </ion-item> 
</ion-list> 

そして、あなたの.TSコードでを見ることができるように

Answer 1

あなたはngModelを使用する必要がありますユーザーはビューに入力しました。フォームやフォームに関連するその他のトピックについては、Angular 2 docsをご覧ください。

---

EDIT

Ionic 2-beta.11が新しい角度フォームを使用しているので、あなたはそれを動作させるためにいくつかの追加のことをチェックする必要があります：

まず、あなたの中に依存関係をご確認ください。 package.jsonファイルには、次のようなものがあることを確認してください。

"@angular/common": "2.0.0-rc.4", 
"@angular/compiler": "2.0.0-rc.4", 
"@angular/core": "2.0.0-rc.4", 
"@angular/forms": "0.2.0", 
"@angular/http": "2.0.0-rc.4", 
"@angular/platform-browser": "2.0.0-rc.4", 
"@angular/platform-browser-dynamic": "2.0.0-rc.4", 
"es6-shim": "^0.35.0", 
"ionic-angular": "2.0.0-beta.11", 
"ionic-native": "1.3.10", 
"ionicons": "3.0.0", 
"reflect-metadata": "^0.1.3", 
"rxjs": "5.0.0-beta.6", 
"zone.js": "0.6.12" 

多少異なる場合がありますが、重要なことは、角材は2.0.0-rc.4バージョンを使用し、また"@angular/forms": "0.2.0",依存性が含まれていることです。

次に、あなたのapp.tsファイルに新しいフォームのモジュールを非推奨のフォームを無効にするには、これらの方法あなたのionicBootstrap呼び出しで

import { disableDeprecatedForms, provideForms } from '@angular/forms'; 

とをインポートし、有効にする必要があります代わりに

ionicBootstrap(YourAppName, 
    [ 
    disableDeprecatedForms(), // disable deprecated forms 
    provideForms()    // enable new forms module 
    ], {}); 

そして、フォームがあるページで、フォームに関連するものを@angular/formsからインポートするだけです。他のモジュール（@angular/coreなど）からフォームに関連するものをインポートしていないことを確認してください。

import { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';