Components: No value accessor for from control

[cschroeter]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

There should be an value accessor.

What is the current behavior?

main.987e5bf….bundle.js:17 EXCEPTION: No value accessor for form control with name: 'username'

What are the steps to reproduce?

This bug occurs only if you run ng build --prod.

Use angular-cli@webpack to create a new project.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MdCardModule } from '@angular2-material/card/card';
import { MdInputModule } from '@angular2-material/input/input';
import { MdButtonModule } from '@angular2-material/button/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    ReactiveFormsModule,
    MdCardModule,
    MdInputModule,
    MdButtonModule,
  ],
  providers: [],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

<form [formGroup]="form">
  <md-card>
    <md-card-title>{{title}}</md-card-title>
    <md-card-content>
      <md-input placeholder="Username" formControlName="username"></md-input>
      <md-input placeholder="Password" formControlName="password"></md-input>
    </md-card-content>
    <md-card-actions align="end">
      <button md-button color="primary" type="submit">LOGIN</button>
    </md-card-actions>
  </md-card>
</form>

What is the use-case or motivation for changing an existing behavior?

Build an Angular2 app with prod flag.

Which versions of Angular, Material, OS, browsers are affected?

[email protected], [email protected], [email protected], OSX 10.11.5

Is there anything else we should know?

As mentioned above, this only happens with the prod flag

[alsami]

You are missing the FormsModule import from @angular/forms I think. ReactiveModule is not enough afaik.

[cschroeter]

I think I had a reference on FormModules at some point. But If it is really needed here, it should not work in dev mod either

[YeomansIII]

I'm also getting this error using ngModel on an input that is not even inside of a form.

<md-input placeholder="Track ID" [(ngModel)]="data.track_id"></md-input>
<md-input placeholder="Cover URL" [(ngModel)]="data.cover_url"></md-input>

Getting the error No value accessor for form control with unspecified name within browser_adapter.js.

I have FormsModule and I just tested with ReactiveFormsModule as well after reading this thread. Still getting the same error.

EDIT: I replaced md-input with a regular input tag and the page works as expected, this is defintely an issue with angular/material2.

These work fine:

<input placeholder="Track ID" [(ngModel)]="data.track_id"/>
<input placeholder="Cover URL" [(ngModel)]="data.cover_url"/>

[Sabartius]

@YeomansIII I also got the error No value accessor for form control with unspecified name
It was resolved by importing FormsModule and ReactiveFormsModule

[jelbourn]

@cschroeter is this still happening with the latest version of webpack angular-cli?

[cschroeter]

@jelbourn works with [email protected] (npm link), @angular/** 2.0.0-rc.6 and @angular2-material/*: 2.0.0-alpha.8-1

[karvapallo]

Still getting this in the md-select control using @angular/** 2.2.1.

[maxime1992]

With material 2.0.0-beta.3 we now have to import every modules one by one and I forgot MdSelectModule which gave me this error. (might help someone)

[splurtcake]

Still getting this with md-radio-button

[ltfleming]

Also having this with md-radio-button

[VictorSDK]

Find out that some other missing material modules can be the cause of this issue. I was getting this error because I forgot to import MatCheckboxModule, but the error points to a line where there is a [value] attribute in a mat-option in a mat-select

[ganeshpatil0101]

I am also getting the same error for md-select, earlier it was working fine.
_@angular/cli: 1.2.7
node: 8.6.0
os: linux x64
@angular/animations: 4.3.3
@angular/cdk: 2.0.0-beta.11
@angular/cli: 1.2.7
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/material: 2.0.0-beta.6
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/platform-server: 4.3.3
@angular/router: 4.3.3
@angular/compiler-cli: 4.4.3__

[silentHoo]

I'm getting this same error when testing md-checkbox together with reactive forms like this. When I build or run the app in dev mode it works as expected.

<mat-checkbox
  id="allDay"
  type="checkbox"
  formControlName="allDay">
      <!-- i18n: @@event.allDay -->All Day Event?<!-- /i18n -->
</mat-checkbox>

The error is:

Failed: No value accessor for form control with name: 'allDay'
  Error: No value accessor for form control with name: 'allDay'
      at _throwError <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:1918:1)
      at setUpControl <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:1828:1)
      at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addControl <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:4808:1)
      at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._setUpControl <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:5396:1)
      at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges <path_to_my_project>/node_modules/@angular/forms/@angular/forms.es5.js:5314:1)
      at checkAndUpdateDirectiveInline <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:10845:1)
      at checkAndUpdateNodeInline <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:12349:1)
      at checkAndUpdateNode <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:12288:1)
      at debugCheckAndUpdateNode <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:13149:22)
      at debugCheckDirectivesFn <path_to_my_project>/node_modules/@angular/core/@angular/core.es5.js:13090:1)

Code works for <mat-form-field> without problems:

<mat-form-field>
  <input
    matInput
    type="text"
    formControlName="name">
</mat-form-field>

Is this still a bug or do I miss something?

[rajeshkumarsampath]

Add ngDefaultControl to the custom-input component. This adds two-way databinding, you shouldn't have to implement the value accessor methods unless you are doing something unique.

<custom-input name="firstName" [(ngModel)]="firstName" ngDefaultControl></custom-input>

Source :https://stackoverflow.com/questions/38958347/angular2-rc-5-custom-input-no-value-accessor-for-form-control-with-unspecified

[mfdeveloper]

@rajeshkumarsampath This solution doesn't works. This directive will apply DefaultValueAcessor, that contains a default implementation of writeValue() for input, textarea.... This is not a real solution, because the custom control implements ControlValueAccessor interface and override this method, and can be restricted to others selectors/html elements.

Import ReactiveFormsModule and FormsModule into my module too like @Sabartius said, doesn't works too. In my case, the custom component that implements ControlValueAccessor is nested into another component. When move to outside from them, it works!! I don't know why :confused:

@cschroeter This is can be reonpened?

[mluis]

I'm having the exact same issue as @VictorSDK . Any solution for this?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}