NativeScript error using [(ngModel)]

Question

I'm starting an app using Nativescript and I still don't know so much this framework. I'm trying to make a page to create an user account and I have a form where you have to write your email and password. The problem is that I need to catch the strings that the user write and for this I use [(ngModel)], but I have an error. I have imported the NativeScriptFormsModule in my app.module.ts and this gets my an error.

Here is my create.user.component.ts

import { Component } from '@angular/core';

import { RouterExtensions } from 'nativescript-angular/router';

import firebase = require('nativescript-plugin-firebase');

@Component({
    selector:'create-user',
    template:`
                <StackLayout>
                    <Label class="titulo" text="Create User"></Label>
                    <TextField hint="Email" keyboardType="text" [(ngModel)]="email"
                        autocorrect="false" autocapitalizationType="none"></TextField>
                    <TextField hint="Password" secure="true" [(ngModel)]="password"
                        autocorrect="false" autocapitalizationType="none"></TextField>
                    <Button class="submit-botton" (tap)="create()" text="Crear usuario"></Button>
                </StackLayout>
        `,
    styleUrls:['login/login.component.css']
})
export class CreateUserComponent{

    email:string;
    password:string;

    constructor(private routerExt: RouterExtensions ){}

        create(){
            firebase.createUser({
                email:this.email,
                password: this.password

            }).then(
                (result)=>{

                    this.routerExt.navigate(["/chatListado"],{
                        transition:{
                            name: "flip",
                            duration:500,
                            curve:"linear"
                        }
                    });
                    console.log("User Created");
                },
                (errorMessage)=>{
                    alert('error: ' + errorMessage);
                }
            );

        }
}

And this is the error I have when I start the app:

JS: ERROR Error: Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute JS: Error: No value accessor for form control with unspecified name attribute JS: at _throwError (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/forms/bundles/forms.umd.js:1838:11) [angular] JS: at setUpControl (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/forms/bundles/forms.umd.js:1751:9) [angular] JS: at NgModel._setUpStandalone (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/forms/bundles/forms.umd.js:4320:9) [angular] JS: at NgModel._setUpControl (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/forms/bundles/forms.umd.js:4306:37) [angular] JS: at NgModel.ngOnChanges (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/forms/bundles/forms.umd.js:4237:18) [angular] JS: at checkAndUpdateDirectiveInline (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:10715:19) [angular] JS: at checkAndUpdateNodeInline (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:12097:17) [angular] JS: at checkAndUpdateNode (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:12065:16) [angular] JS: at debugCheckAndUpdateNode (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:12694:59) [angular] JS: at debugCheckDirectivesFn (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:12635:13) [angular] JS: at Object.eval [as updateDirectives] (ng:///AppModule/LoginComponent.ngfactory.js:363:5) [angular] JS: at Object.debugUpdateDirectives [as updateDirectives] (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:12620:21) [angular] JS: at checkAndUpdateView (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:12032:14) [angular] JS: at callViewAction (file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js:12347:17) [angular]

Import the NativeScriptFormsModule in your main app.component.ts and it should work — Bisho Adam

Nick Iliev Nick Iliev · Accepted Answer · 2017-04-27T11:17:40

Make sure that you have done the following in your module file (quoted from docs.nativescript.org)

Before we can use the ngModel directive in a two-way data binding, we must import the NativeScriptFormsModule and add it to the Angular module's imports list:

import {NativeScriptFormsModule} from "nativescript-angular/forms"
@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptFormsModule, // RIGHT HERE
    ],
})

NativeScript error using [(ngModel)]

1 Answers