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’…..
Advertisement
Answer
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.