No value accessor for 'username'

Ionic Framework ionic-v3
1

When I run ionic serve, my code seems to work fine, but when I run my tests with npm test (following this 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; }
}

Thanks in advance!

2

Ohh, I have the same issue, any help?

Thank you.

3

could you post your testcode?

4

Thank you for posting this, I was getting the same error.

It seems that ionic 2 components aren’t playing well with the new Angular 2 form directives. I could get it to work with the basic html inputs.

They also discussed it in this topic: