Problem with [ngFormModel] implement


#1

I have started recently to develope with Ionic 2 and I have some problem with the ionic form. I have this error : browser_adapter.js:77 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property ‘visitStatement’ of undefined

I thinks it’s a library bad implemented but I’m blocked.

This is my code:

Login.html

<ion-content class="has-header" padding align="center">
  <form [ngFormModel]="loginForm" (submit)="">
             <ion-input stacked-label>
                 <ion-label>Username</ion-label>
                 <ion-input [(ngModel)]="username" type="text" [ngFormControl]="username"></ion-input>
             </ion-input>

             <ion-input stacked-label>
                 <ion-label>Password</ion-label>
                 <ion-input [(ngModel)]="password" type="password" [ngFormControl]="password"></ion-input>
             </ion-input>

             <div padding>
                 <button block type="submit">Login</button>
             </div>
  </form>

</ion-content>

and login.ts

import {Page} from 'ionic-angular';
import {FormBuilder, Validators, ControlGroup} from 'angular2/common';

@Page({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  loginForm:ControlGroup;
  rememberMe = false;
  // We inject the router via DI
  constructor() {
      this.loginForm = form.group({
          username: ['', Validators.required],
          password: ['', Validators.required],
          rememberMe: ['', Validators.required]
      });
  }
  login(event:Event,username:string,password:string,rememberMe:boolean):void {
      // This will be called when the user clicks on the Login button

  }
}

Sorry for my english and thanks for your answers


#2

The error says that you are trying to access a property visitStatement on something that is undefined, where in your code are you doing this?


#3

I thinks it’s in the part that I present before. Because when I delete this part my code is OK.


#4

I would recommend checking out this article and these official docs for forms.

In general, you don’t need both ngModel and ngFormControl on the same element. It is possible, but I don’t see a whole lot of value in it. So I would choose one or the other, and then make sure that you’re binding to something that exists in the controller. If using [(ngModel)], username and password need to be strings. If using [ngFormControl], they need to be Controls, or you can change how you reference them via the form: [ngFormControl]="loginForm.controls['username']".


#5

Thanks you I work on it.