javascript – No value accessor for form control

javascript – No value accessor for form control

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.

For UnitTest angular 2 with angular material you have to add MatSelectModule module in imports section.

import { MatSelectModule } from @angular/material;

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CreateUserComponent ],
      imports : [ReactiveFormsModule,        
        MatSelectModule,
        MatAutocompleteModule,......

      ],
      providers: [.........]
    })
    .compileComponents();
  }));

javascript – No value accessor for form control

For anyone experiencing this in angular 9+

This issue can also be experienced if you do not declare your component or import the module that declares the component.

Lets consider a situation where you intend to use ng-select but you forget to import it Angular will throw the error No value accessor…

I have reproduced this error in the Below stackblitz demo.