Ionic2 forms showing error

Hello,

I’m facing issue while creating a simple form for login into my app. I’m referring ionic2 conference app source code for creating login form.

But at the time of ionic serve in browser console I got following error:
No value accessor for ‘username’

This is my login.html file

<form #loginForm="ngForm" novalidate>
        <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input [(ngModel)]="login.username" ngControl="username" type="text" name="username" #username="ngForm" spellcheck="false" autocapitalize="off" required></ion-input>
        </ion-item>
        <p [hidden]="username.valid || submitted == false" danger padding-left>
            Username is required.
        </p>

        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input [(ngModel)]="login.password" ngControl="password" type="password" name="password" #password="ngForm" required></ion-input>
        </ion-item>
        <p [hidden]="password.valid || submitted == false" danger padding-left>
            Password is required
        </p>

        <div padding></div>
        <div padding></div>
        
        <button primary block (click)="onLogin(loginForm)" type="submit">Sign In</button>
</form>

and in login.ts file

@Component({ templateUrl: 'build/pages/login/login.html' } export class LoginPage {

  login: {username?: string, password?: string} = {}
  submitted = false;

  constructor(private nav: NavController) {}

  onLogin(form) {
      this.submitted = true;

       if (form.valid) {
          console.log(form);
          console.log('Login data : ' + JSON.stringify(form));
       }
   }
}

All is same as ionic2 conference app. but it’s showing error.
Plz let me know where I’m doing wrong.

Uhmmm, those forms may need an update to the latest Angular 2 RC4 in the next Ionic 2 beta11 release.

Can you post what’s your ionic-angular version on your packages.json?

@matheo Its 2.0.0-beta.10 version of ionic-angular

I added @angular/forms using command npm install --save @angular/forms@0.1.1

I though this will work for me…

But now i got it… its not working mainly because of i’m on beta 10 version…

How should i update my dependencies?

Yep, I’ve upgraded my dependencies on my package.json to:

"dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "2.0.0-rc.2",
    "@angular/forms": "^0.2.0",
    "es6-shim": "^0.35.0",
    "ionic-angular": "^2.0.0-beta.11",
    "ionic-native": "1.3.10",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "socket.io-client": "^1.4.8",
    "zone.js": "^0.6.12"
  },

and executed npm install,
then updated the code of Angular 2 forms to the latest API:

import { Component } from '@angular/core';
import { Validators } from '@angular/common';
import { REACTIVE_FORM_DIRECTIVES, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/account/login/login.html',
  directives: [ REACTIVE_FORM_DIRECTIVES ]
})
export class LoginPage {
  loginForm: FormGroup;

  constructor(
    private nav: NavController,
    builder: FormBuilder
  ) {
    this.loginForm = builder.group({
      'username': [
        '', // default value
        [Validators.required, Validators.minLength(5)]
      ],
      'password': [
        '',
        [Validators.required, Validators.minLength(5)]
      ]
    });
  }

  submit() {
    // submit this.loginForm.value
  ...

and the template:

<form class="list" [formGroup]="loginForm" (ngSubmit)="submit()" novalidate>
  <ion-item>
    <ion-label stacked>Username</ion-label>
    <ion-input type="text" formControlName="username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Password</ion-label>
    <ion-input type="password" formControlName="password"></ion-input>
  </ion-item>
  <ion-buttons>
    <button type="submit" block round>Sign In</button>
  </ion-buttons>
</form>

Note that I prefer the model-driven forms for my apps instead the template driven.
Happy coding!

Thanks @matheo

Actuly i’m also using model driven…that will suit better for my project…

Bt i’m facing above issue…that’s i thought atleast template driven will work… that’s why i posted with template driven form.

So matheo what should i enter commands to update my dependencies to 2.0.0-rc.4 of package.json

Or should i edit my package.json file directly…
Or any commnad to update my ionic version to beta-11

Thanks in advance

Thanks for the info matheo.

I do exactly as you do in your example, I have the same dependencies (well similar, see below), but get the following:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./LoginPage class LoginPage_Host - inline template:0:0
ORIGINAL EXCEPTION: No provider for FormBuilder!

when I add a provider:

providers: [FormBuilder]

I get the following:

  *It looks like you're using the old forms module. This will be opt-in in the next RC, and
  will eventually be removed in favor of the new forms module. For more information, see:
  https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

Any ideas appreciated how I should handle the FormBuilder please.

Thanks

  "dependencies": {
    "@angular/common": "^2.0.0-rc.4",
    "@angular/compiler": "^2.0.0-rc.4",
    "@angular/core": "^2.0.0-rc.4",
    "@angular/forms": "^0.2.0",
    "@angular/http": "^2.0.0-rc.4",
    "@angular/platform-browser": "^2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.3.2",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },

@richardmarais looking at your package.json dependencies, it seems your ionic-angular not upgraded to 2.0.0-beta.11

And the second thing is if you are using Model-driven forms. Then it’s better to use REACTIVE_FORM_DIRECTIVES include as a directives in your component (as I have seen this in some articles on web) like the example provided by matheo.

Thanks for the help razpatangay,

I ran:

npm install --save ionic-angular@2.0.0-beta.11

I’m upgraded now, and it works.

I am running ionic-angular@2.0.0-beta.11, with allmost the same example as yours, but I get the following error

browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'FormGroup' since it isn't a known native property ("

<ion-content class="home" padding>
    <form [ERROR ->][FormGroup]="authForm" (ngSubmit)="login(authForm.value)" novalidate>

not sure what I am doing wrong.
I have the REACTIVE_FORM_DIRECTIVES in the directives of the component.

It started working now, I did two things,

  • I used your package.json in lettter and spirit
  • I found that in the html form, I made a mistake of keeping ‘form [FormGroup]’ instead of ‘form [formGroup]’,

With the above changes, it works perfect now.
Thank you so much for the great example.