No value accessor for 'username'

[morphatic]

When I run ionic serve, my code seems to work fine, but when I run my tests with npm test (following your AMAZING tutorial), the tests fail and I get an error:

Error: No value accessor for 'username'

I've tracked the problem down to the markup used for the <input> elements. If I use the <ion-input> (to get the pretty formatting) then the error is thrown. If I just use a plain <input> then there is no error and the tests all pass. I'm thinking there might be something the matter with the way that either browserify or PhantomJS handles the non-standard elements??? Here's my code if you'd like to look.

The problem is with my login form. Here is the relevant HTML:

  <form [ngFormModel]="loginForm" (submit)="login($event)">
    <ion-card>
      <ion-card-header>
        Please enter your credentials:
      </ion-card-header>
      <ion-list>
        <ion-item>
          <ion-input ngControl="username" placeholder="Username/Email"></ion-input>
        </ion-item>
        <ion-item>
          <ion-input type="password" ngControl="password" placeholder="Password"></ion-input>
        </ion-item>
      </ion-list>
    </ion-card>
    <button full type="submit" [disabled]="!loginForm.valid">Login</button>
  </form>

And here is the code:

import {Page, NavController} from 'ionic-angular';
import {FormBuilder,Validators,ControlGroup} from '@angular/common';
import {HTTP_PROVIDERS} from '@angular/http';
import {PlayerApi} from '../../services/gb-services';

@Page({
  templateUrl: 'build/pages/login/login.html',
  providers: [HTTP_PROVIDERS, PlayerApi]
})
export class LoginPage {

  loginForm: ControlGroup;

  constructor(public nav: NavController, private playerApi: PlayerApi, fb: FormBuilder) {
    this.loginForm = fb.group({
      "username": ["", Validators.required],
      "password": ["", Validators.required]
    });
  }

  login(event): void {
    event.preventDefault();
    this.playerApi.login(this.loginForm.value)
      .subscribe(this.storeCredentials, this.notifyOnFail);
  }

  storeCredentials(user: any) {
    console.log(user);
  }

  notifyOnFail(err: any) {
    console.log(err);
  }

  get value(): string { return this.loginForm.value; }
}

AMAZING tutorial! I spent many days trying to get TDD working with my Ionic2/Angular2 app dev workflow with no luck. Thank you!!!

[lathonez]

Sorry for the delay in getting back to you. I'm going to take a look this evening.

[lathonez]

This does the trick for me:

x220:~/code/golfbot_app$ git diff app/pages/login/login.html
diff --git a/app/pages/login/login.html b/app/pages/login/login.html
index 8fd02f0..871265a 100644
--- a/app/pages/login/login.html
+++ b/app/pages/login/login.html
@@ -9,10 +9,10 @@
       </ion-card-header>
       <ion-list>
         <ion-item>
-          <ion-input type="text" ngControl="username" value="" placeholder="Username/Email"></ion-input>
+          <ion-input type="text" value="" (ngControl)="username" placeholder="Username/Email"></ion-input>
         </ion-item>
         <ion-item>
-          <ion-input type="password" ngControl="password" placeholder="Password"></ion-input>
+          <ion-input type="password" (ngControl)="password" placeholder="Password"></ion-input>
         </ion-item>
       </ion-list>
     </ion-card

Reference: http://stackoverflow.com/a/36471115/5083721

(Please reopen if this doesn't solve for you)

[dorontal]

The above doesn't solve it for me, though I'm not the original poster. I recently posted the problem here https://forum.ionicframework.com/t/beta-10-karma-testing-fails-when-using-ngmodel-in-template-with-error-no-value-accessor-for/56357

[lathonez]

Thanks a lot for the info. I'm tracking this on #108 as it's since been raised again and OP didn't get back to me.

[lathonez]

#191