Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 764

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 764

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 580

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 438

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/tutopal.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
Fix - Error: No Value Accessor for Form Control with Name - TutoPal

Fix – Error: No Value Accessor for Form Control with Name

error: No value accessor for form control with name

When you are trying to design a program in Angular.js, you may get an exception ‘error: No value accessor for form control with name’. Although it seems a serious error to beginners, it is not an exception that can’t be solved. In fact, it is a common error that can easily be fixed.

This is the type of error that you may get when you are trying to log in. It happens sometimes when you are programming to make a form. Let’s dig into it to know how to fix it

How To Fix ‘Error: No Value Accessor for Form Control with Name’

There is always a fix for every exception, the same goes for this one. First, we need to figure out how you get the error warning in your code, and then the ways to solve it.

How error “No Value Accessor for Form Control with Name” occurs

Have a look at the complete code to see how you may get the error

Login Code

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 LoginFormComponent implements OnInit {
    private loginFrm: FormGroup; // model control form
    private isSubmitted: boolean; // check if form is submitted
    private changes: any[] = []; // changing form events

    constructor(private fb: FormBuilder, private ls:LoginService){
    }
    ngOnInit(){
        this.loginFrm = new FormGroup({
            e_mail: new FormControl('',[<any>Validators.required]),
            pass_word: new FormControl('', [<any>Validators.required, <any>Validators.minLength(6)]),
            remember: new FormControl()
        });
    }
    save(user: User, isValid: boolean) {
        console.log("Test Save");
        console.log(user, isValid);
    }
    // Login in user
    login(e_mail: any, pass_word: any){
        this.ls.login(e_mail, pass_word, false); 
    }
}

HTML Code

<div id="login-page">
    <div class="form-wrapper">
        <form class="login-form" [formGroup]="loginFrm" novalidate (ngSubmit)="save(loginFrm.value, loginFrm.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="e_mail" type="email"> 
                    <label class="center-align" for="e_mail" formControlName="e_mail">Email</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <input id="pass_word" type="password"> 
                    <label class="center" for="pass_word" formControlName="pass_word">Password</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12 m12 l12 login-text">
                    <input id="remember" type="checkbox" formControlName="remember">
                    <label for="remember">Remember me</label>
                </div>
            </div>
            <div >
                <div class="input-field col s12">
                    <ahref="index.html">Login</a>
                </div>
            </div>
            <div >
                <div >
                    <p><a href="register.html">Register Now!</a></p>
                </div>
                <div >
                    <p><a href="forgot-password.html">Forgot password ?</a></p>
                </div>
            </div>
        </form>
    </div>
</div>

This is what you get in the end

EXCEPTION: Uncaught (in promise): Error: Error in ./LoginFormComponent
 class LoginFormComponent - inline template:13:45 caused by: No value
 accessor for form control with name: 'e_mail'.....

It is the complete issue that you may get. There is no need to worry as a little bit of change in the code can solve the issue.

Use the ‘formControlName’

The best solution to fix the error is to know where you are adding the ‘‘formControlName’. You must be adding it to the label instead of input.

You need to replace this:

<div >
  <div class="input-field col s12">
    <input id="e_mail" type="email"> 
    <label class="center-align" for="e_mail" formControlName="e_mail">Email</label>
  </div>
</div>

 With this:

<div >
  <div class="input-field col s12">
    <input id="e_mail" type="email" formControlName="e_mail"> 
    <label class="center-align" for="e_mail">Email</label>
  </div>
</div>

Import the ‘MatSelectModule’

If you are using UnitTest angular 2 having the angular material, you need to add the ‘MatSelectModule’ in the imports section to fix the error. Check out the code

import { MatSelectModule } from @angular/material;

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

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

Conclusion

And, that’s it! We covered the fixes to get rid of ‘error: No value accessor for form control with name’. The solutions can help you with your program.  

I wish you luck!

Leave a Reply

Your email address will not be published. Required fields are marked *