Confused about Forms, console.log returning nothing

Ionic Framework ionic-v3
1

Hey Guys,

So in my trying to make light of a tutorial im reading.

In my login.html form i have the following code

  <form *ngSwitchCase="'login'" #loginCreds="ngForm" (ngSubmit)="login(loginCreds.value)">
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" ngControl="email"></ion-input>
    </ion-item>
    
    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" ngControl="password"></ion-input>
    </ion-item>
    
    <div padding>
      <button block type="submit">Login</button>        
    </div>
    
  </form>

Then in my login.ts i have the following

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service/auth-service';
import { HomePage } from '../home/home';

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

	authType: string = "login";

	constructor( private auth: AuthService, private navCtrl: NavController ) {}

	login(credentials) {
		console.log(credentials)
	}

}

When i run it, the console shows an empty object … Im so confused.

If anyone could shed light on why its not returning it would be greatly appreciated.

2

Which ionic version do you use?

3

Hey, oh sorry, i should have included that.

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19

4

i do not tested it, but with angular rc4 there are the new forms --> @angular/forms v0.2.0.

Maybe you should upgrade your forms to the new forms api

5

This is what i have in my package.json

"@angular/forms": "0.2.0",

6

I figured it out . I will post what i did below for anyone else having the same issues.

I updated the form tag shown below

<form #f="ngForm" (ngSubmit)="login(f.value)">

Updated the input fields

<ion-input type="text" name="email" ngModel></ion-input>

imported some stuff

import { FormGroup, FormControl, Validators, FormBuilder, FORM_DIRECTIVES } from '@angular/forms';

and BOOM! a working form which is now logging in …

2 Likes
7

You saved my day! I’ve been struggling with this all day. Thanks

8

Awesome, im glad i could help someone out :slight_smile: