NativeScript ng2 two way binding doesn`t work on TextField

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-11 04:25:55

问题


im making a mobile app. In my login form i have 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>

in 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);
    }
}

Label is showing "example" but textField does not. Change value of textField doesnt change value in component logic. Any Idea?

ps. I already imported NativescriptFormsModule in my @ngModule


回答1:


Make sure you import NativescriptFormsModule on the module that declare SignInPage Component not only in AppModule.




回答2:


You might want to put it in a shared module if you are using it in many places in your project, for instance:

// 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";



回答3:


to enable two-way data binding in nativescript you will have to import NativeScriptFormsModule in the module. It is just like FormsModule which we use angular to enable two-way data binding.

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


来源:https://stackoverflow.com/questions/43502810/nativescript-ng2-two-way-binding-doesnt-work-on-textfield

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!