Reputation: 470
My application seems to be working fine if I use ng serve. When I navigate to the localhost there are no errors.
When I do a prod build and publish the site I get the following error: EXCEPTION: Error: Uncaught (in promise): No value accessor for form control with name: 'email'
I am using cli 1.0.0-beta.11-webpack.2; angular 2 RC5; material 2.0.0-alpha.7-4.
app.modlues.ts look as follows:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Authenticated } from './authenticated';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MdButtonModule } from '@angular2-material/button';
import { MdCardModule } from '@angular2-material/card';
import { MdCheckboxModule } from '@angular2-material/checkbox';
import { MdCoreModule } from '@angular2-material/core';
import { MdIconModule } from '@angular2-material/icon';
import { MdInputModule } from '@angular2-material/input';
import { MdListModule } from '@angular2-material/list';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdProgressCircleModule } from '@angular2-material/progress-circle';
import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { AuthenticationService } from './authentication.service';
import { DashboardComponent } from './dashboard/dashboard.component';
import { appRouterProviders } from './app.routes';
import { ActionsComponent } from './actions/actions.component';
import { LoginComponent } from './login/login.component';
import { ActionDetailComponent } from './action-detail/action-detail.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
ActionsComponent,
LoginComponent,
ActionDetailComponent
],
providers: [
appRouterProviders,
AuthenticationService,
Authenticated
],
imports: [
BrowserModule,
CommonModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
RouterModule,
MdButtonModule,
MdCardModule,
MdCheckboxModule,
MdCoreModule,
MdIconModule,
MdInputModule,
MdListModule,
MdProgressBarModule,
MdProgressCircleModule,
MdRadioModule,
MdToolbarModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
login component where the error occurs:
import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../authentication.service';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: 'login.component.html',
styleUrls: ['login.component.css'],
directives: [
NgForm
]
})
export class LoginComponent implements OnInit {
email: string;
password: string;
submitted : boolean = false;
constructor(private authenticationService: AuthenticationService, private router: Router) {}
ngOnInit() {
}
onSubmit() {
this.submitted = true;
this.authenticationService.login(this.email, this.password)
.subscribe(
(result) => {
this.submitted = false;
if (result) {
this.router.navigate(['']);
}
},
(error) => {
this.submitted = false;
});
}
}
Login component html:
<div>
<md-card>
<h1>Login</h1>
<br/>
<form (ngSubmit)="onSubmit()" #loginForm="ngForm">
<div>
<md-input placeholder="Username" required [(ngModel)]="email" name="email"></md-input>
</div>
<div>
<md-input placeholder="Password" type="password" required [(ngModel)]="password" name="password" ></md-input>
</div>
<br/>
<button md-raised-button type="submit" [disabled]="!loginForm.form.valid || submitted" class="btn btn-default">Submit</button>
</form>
</md-card>
</div>
Upvotes: 1
Views: 992
Reputation: 7621
Template parse is not working properly as it should and angular team has provided a work around on their docs for right now but hope fully it should be fix soon in webpack.config file add this
htmlLoader: {
minimize: false // workaround for ng2
},
Or
{
test: /\.html$/,
loader: `html?-minimize`
}
Upvotes: 3