浮动标签，如何在 .ts 中获得结果？

Question

我有一个简单的问题，但我无法解决。我的 .html 中有一个浮动标签，如下所示：

<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>

如何在我的 .ts 文件中获取用户名和密码？提前致谢！

此致。

Answer 1

你应该像你看到的那样使用ngModelin 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 代码中：

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

  private username: string;
  private password: string;

  constructor() { 

  }
}

因此在代码中您可以使用 username 和 password 属性来访问用户在视图中输入的值。请查看 Angular 2 docs 以了解有关此内容以及与表单相关的其他一些主题的更多信息。

编辑

由于 Ionic 2-beta.11 使用新的 Angular 表单，您需要检查一些额外的内容才能使其正常工作：

首先，请检查 package.json 文件中的 dependencies，确保你有这样的东西：

"@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"

可能略有不同，但重要的是 angular 东西使用 2.0.0-rc.4 版本，并且包含 "@angular/forms": "0.2.0", 依赖项。

然后，在您的 app.ts 文件中，您必须导入

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

并在您的 ionicBootstrap 中调用这些方法来禁用已弃用的表单，并改为启用新的表单模块

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

然后，在您拥有表单的页面中，只需从 @angular/forms 导入与表单相关的内容。请检查您是否没有从其他任何模块（如 @angular/core）导入与表单相关的内容。

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

浮动标签，如何在 .ts 中获得结果？

Floating label, How to get a result in .ts?

typescript

ionic2

angular