I have upgrade my ionic 2 to latest beta 11 but I am getting error “EXCEPTION: Error: Uncaught (in promise): No value accessor for ‘email’”
zone.js:461 Unhandled Promise rejection: No value accessor for ‘email’ ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: “No value accessor for ‘email’”, stack: "Error: No value accessor for 'email’↵ at new Ba…
login.ts
import {Component} from '@angular/core';
import {Storage, LoadingController, LocalStorage, Events, NavController, ModalController, AlertController} from 'ionic-angular';
import { FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES } from '@angular/common';
import {SignupPage} from '../signup/signup';
import {AccountPage} from '../account/account';
import {ForgotPage} from '../forgot/forgot';
import {DataService} from '../../providers/data-service';
import { ValidationService } from '../../validation';
@Component({
templateUrl: 'build/pages/login/login.html',
directives: [FORM_DIRECTIVES]
})
export class LoginPage {
loginForm: ControlGroup;
email: Control;
password: Control;
login: {email?: string, password?: string} = {};
submitted = false;
myoutput = [];
HAS_LOGGED_IN = 'hasLoggedIn';
storage = new Storage(LocalStorage);
constructor(
private nav: NavController,
private events: Events,
private dataService: DataService,
public alertCtrl: AlertController,
public loadingCtrl: LoadingController,
public modalCtrl: ModalController,
builder: FormBuilder) {
this.loginForm = builder.group({
email : ['', Validators.compose([Validators.required, ValidationService.emailValidator])],
password : ['', Validators.required]
});
}
login.html
<form #loginForm="ngForm" (ngSubmit)="onLogin(loginForm.value)">
<ion-item>
<ion-label floating primary>Your Email Address</ion-label>
<ion-input name="email" [(ngModel)]="login.email" ngControl="email" type="email" #email="ngForm" required>
</ion-input>
</ion-item>
<p [hidden]="email.valid || email.emailFormat || submitted == false" danger padding-left>
Valid Email is required
</p>
<ion-item>
<ion-label floating primary>Password</ion-label>
<ion-input name="password" [(ngModel)]="login.password" ngControl="password" type="password" #password="ngForm" required>
</ion-input>
</ion-item>
<p [hidden]="password.valid || submitted == false" danger padding-left>
Password is required
</p>
<ion-row>
<ion-col>
<button type="submit" primary block>Login</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col center text-center>
<button type="button" (click)="onSignup()" pink clear>New User? Create Account</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col center text-center>
<button type="button" (click)="onForgot()" dark clear>Forgot Password?</button>
</ion-col>
</ion-row>
</form>