首页 文章

NativeScript ng2双向绑定在TextField上不起作用

提问于
浏览
2

即时通讯制作移动应用 . 在我的登录表单中,我有2个TextFields

<TextField hint="Email Address" keyboardType="email" [(ngModel)]="email" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField hint="Password" secure="true" [(ngModel)]="password"></TextField>
 <Label [text]="email"></Label>

在component.ts中

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Page } from "ui/page";
import * as Toast from 'nativescript-toast';
@Component({
    moduleId: module.id,
    selector: 'sign-in',
    templateUrl: "template.html"
})
export class SignInPage implements OnInit {
    email: string ="example";
    password: string;
    constructor(private router: Router, page: Page) {
        page.actionBarHidden = true;
    }
    ngOnInit() {

        var loginParams = { user: { email: this.email }, password: this.password };

        console.dump(loginParams);
    }
}

标签显示“示例”,但textField没有 . 更改textField的值不会更改组件逻辑中的值 . 任何的想法?

PS . 我已经在@ngModule中导入了NativescriptFormsModule

3 回答

  • 10

    确保在不仅在AppModule中声明SignInPage组件的模块上导入NativescriptFormsModule .

  • 0

    如果您在项目的许多地方使用它,可能需要将它放在共享模块中,例如:

    // shared.module.ts
    
        .....
        import { NativeScriptFormsModule } from "nativescript-angular/forms";
    
        @NgModule({
            imports: [
                .....
                NativeScriptFormsModule,
                .....
            ],
            declarations: [
                .....
            ],
            exports: [
                .....
                NativeScriptFormsModule,
                .....
            ]
        })
        export class SharedModule { }
    
    // signon.module.ts
    
        .....
        import { SharedModule } from "../shared/shared.module";
    
  • 0

    要在nativescript中启用双向数据绑定,您必须在模块中导入 NativeScriptFormsModule . 它就像 FormsModule ,我们使用angular来启用双向数据绑定 .

    import { NativeScriptFormsModule } from "nativescript-angular/forms";
    @NgModule({
      imports: [
        NativeScriptFormsModule
      ]
    })
    

相关问题