如何将TextField值从HTML文件转换为TypeScript文件?

时间:2018-05-03 08:27:35

标签: html angular2-nativescript

我是nativescript的新手。我想将用户数据存储在我的手机中。为此,我使用了Couchbase数据库。现在我的要求是在单击保存按钮时获取TextField值。 `

<TextField hint=" firstName " [text]="_fname ">

</TextField>
<TextField hint="lastname " [text]="_lname ">

</TextField>

<button (tap)="save()" class="btn btn-primary active" text="Save"></button>

`

在上面我需要在按钮点击时获取两个TextField值。 请解释如何从文本字段访问当前值。提前谢谢。

1 个答案:

答案 0 :(得分:3)

解决这个问题的最佳方法是通过双向数据绑定。您需要做的第一件事是将NativeScriptFormsModule添加到NgModule导入列表中,如下所示。

<强> app.module.ts

import { NgModule } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后,您需要更新组件.html文件以使用双向数据绑定。这会将指定的元素绑定到组件的.ts文件中的属性。

<TextField hint=" firstName " [(ngModel)]="_fname "> </TextField>
<TextField hint="lastname " [(ngModel)]="_lname "> </TextField>

<button (tap)="save()" class="btn btn-primary active" text="Save"></button>

最后,请确保您的_fname文件中包含_lname.ts个属性。

export class SomeComponent {
    _fname = "";
    _lname = "";

    save() {
        console.log(this._fname);
        console.log(this._lname);
        // Send values to your DB
    }
}