I'm using Angular2-rc5, and I'm currently getting an error on my login page. I'm trying to make a form but the console throws exceptions telling me that it can't find my formcontroll
s even though I create it on init. Any idea why I'm getting this error?
login component
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { LoginService } from './login.service';
import { User } from '../../models/user';
@Component({
selector: 'login',
providers: [LoginService],
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
private loginForm: FormGroup; // our model driven form
private submitted: boolean; // keep track on whether form is submitted
private events: any[] = []; // use later to display form changes
constructor(private fb: FormBuilder, private ls:LoginService){
}
ngOnInit(){
this.loginForm = new FormGroup({
email: new FormControl('',[<any>Validators.required]),
password: new FormControl('', [<any>Validators.required, <any>Validators.minLength(6)]),
rememberMe: new FormControl()
});
}
save(model: User, isValid: boolean) {
console.log("Test");
console.log(model, isValid);
}
// Login in user
login(email: any, password: any){
this.ls.login(email, password, false);
}
}
Page.html
<div id="login-page">
<div class="form-wrapper">
<form class="login-form" [formGroup]="loginForm" novalidate (ngSubmit)="save(loginForm.value, loginForm.valid)">
<div >
<div class="input-field col s12 center">
<p class="center login-form-text">Login page</p>
</div>
</div>
<div >
<div class="input-field col s12">
<input id="email" type="email">
<label class="center-align" for="email" formControlName="email">Email</label>
</div>
</div>
<div >
<div class="input-field col s12">
<input id="password" type="password">
<label class="center" for="password" formControlName="password">Password</label>
</div>
</div>
<div >
<div class="input-field col s12 m12 l12 login-text">
<input id="remember-me" type="checkbox" formControlName="rememberMe">
<label for="remember-me">Remember me</label>
</div>
</div>
<div >
<div class="input-field col s12">
<ahref="index.html">Login</a>
</div>
</div>
<div >
<div >
<p><a href="page-register.html">Register Now!</a></p>
</div>
<div >
<p><a href="page-forgot-password.html">Forgot password ?</a></p>
</div>
</div>
</form>
</div>
</div>
Exception
EXCEPTION: Uncaught (in promise): Error: Error in ./LoginComponent class LoginComponent - inline template:13:45 caused by: No value accessor for form control with name: 'email'.....
You are adding the formControlName
to the label and not the input.
You have this:
<div >
<div class="input-field col s12">
<input id="email" type="email">
<label class="center-align" for="email" formControlName="email">Email</label>
</div>
</div>
Try using this:
<div >
<div class="input-field col s12">
<input id="email" type="email" formControlName="email">
<label class="center-align" for="email">Email</label>
</div>
</div>
Update the other input fields as well.