Error in Forms using [(ngModel)]


#1

Hello everyone! I’m starting a project with Nativescript and I love it, but it seems a little bit difficult for me. At the moment I’m trying to make a page to create a user. This 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);
                }
            );

        }
}

At the beginning when I tap the button to create it, the email and password returns undefined. I couldn’t get the email and the password and after searching I observed that I needed to import the NativeScriptFormsModule in my app.module.ts so I made it.

app.module.ts

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

//use the data binding
import { NativeScriptFormsModule} from "nativescript-angular/forms"

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

//login
import { LoginComponent } from "./login/login.component";
import { Login} from './login/login';
import { CreateUserComponent } from './login/create.user.component';

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptFormsModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        CreateUserComponent

    ],
    providers: [
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

With this theoretically it should work but now when I start the app I get this error on my console:

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]

And now I can not go to the page to create the user… When I tap the button to go to the page to create the user I get this error on my app:

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException: 
Calling js method onClick failed

TypeError: Cannot read property 'startsWith' of undefined
File: "file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/core/bundles/core.umd.js, line: 13024, column: 8

StackTrace: 
	Frame: function:'UrlParser.peekStartsWith', file:'file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/router/bundles/router.umd.js', line: 1181, column: 80
	Frame: function:'UrlParser.consumeOptional', file:'file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/router/bundles/router.umd.js', line: 1187, column: 18
	Frame: function:'UrlParser.parseRootSegment', file:'file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/router/bundles/router.umd.js', line: 1018, column: 14
	Frame: function:'DefaultUrlSerializer.parse', file:'file:///data/data/com.Mystory.android/files/app/tns_modules/@angular/router/bundles/router.umd.js', line: 885, column: 30
	Frame: fun

Someone knows what is happening here? If I’m missing something or something like that? I’m stacked with this since 2 or 3 days and I need some help…

Thanks and sorry for my bad English!


#2

What version of NativeScript? Have you tried initializing these bound variables in the constructor method?