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

您应该使用ngModel，就像您可以看到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代码中：

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

  private username: string;
  private password: string;

  constructor() { 

  }
}

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

修改

由于Ionic 2-beta.11使用了新的Angular Forms，因此您需要检查一些其他内容才能使其正常工作：

首先，请检查您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文件中，您必须导入

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中获得结果？

1 个答案: