如何从 HTML 文件获取 TextField 值到 TypeScript 文件？

Question

我是 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 值。请解释如何从文本字段访问当前值。提前致谢。

Answer 1

解决此问题的最佳方法是通过双向数据绑定。您需要做的第一件事是将 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>

最后，确保表单的 .ts 文件中有 _fname 和 _lname 属性。

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

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

如何从 HTML 文件获取 TextField 值到 TypeScript 文件？

How to get TextField value from HTML file to TypeScript file?

html

angular2-nativescript