Home/ Questions/Fixing the error: no value accessor for form control with name
Next
Answered
Raphaël Pottier
  • 6
Asked: 2022-05-12T09:55:50+00:00 In:

Fixing the error: no value accessor for form control with name

  • 6

. Advertisement .

..3..

. Advertisement .

..4..

I am trying to write a javascript that returns the invalid answer. I don’t know where the incorrect command is in the “no value accessor for form control with name”. My detail is:

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); 
  }
 }
<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>
  ...
  </form>
  </div>
 </div>

and I end up with the warning message:

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'.....

Pls, suggest the best answer to fix it.

no value accessor
Share

2 Answers

  1. Best Answer
    Expert

    The cause: The error happens because of adding the formControlName to the label and not the input.

    The solution:  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>
    Change it to :
    <div >
  <div class="input-field col s12">
    <input id="email" type="email" formControlName="email">
    <label class="center-align" for="email">Email</label>
  </div>
</div>
    • 7

  2. To use UnitTest angular 2 with angular material , you must add MatSelectModule module to imports section. 

    import { MatSelectModule } from '@angular/material';

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

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

Leave an answer

You must login to add an answer.

Need An Account,