formControlName: Cannot read property 'value' of undefined

cannot read property 'get' of undefined
cannot read property 'invalid' of undefined
cannot read property 'touched' of undefined
cannot read property 'controls' of undefined
cannot read property 'setvalidators' of null
cannot read property 'setvalue' of undefined angular 7
cannot read property 'group' of undefined
cannot read property 'get' of undefined angular 7

I'm currently trying to complete angulars basics guides, and i'm currently having some issues with reactive forms.

Line 4 in my HTML is throwing this error: ERROR TypeError: Cannot read property 'value' of undefined

component.html:

<form [formGroup]="loginForm">
  <label>
    Username:
    <input type="text" formControlName="name">
  </label>
  <p>{{name.value}}</p>
  <label>
    adress:
    <input type="text" formControlName="adress">
  </label>
</form>

component.ts:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(
    private formbuilder : FormBuilder
  ) { }

  loginForm :FormGroup;
  username : FormControl;
  adress : FormControl;


  ngOnInit() {
    this.username = new FormControl('test',Validators.required);
    this.adress = new FormControl('something',Validators.required);
    this.loginForm = this.formbuilder.group({
      name : this.username,
      adress : this.adress
    })
  }
}

I've tried various variations of using the formbuilder, but i havnt yet been able to make it work.

Data is showing up in the input controls i've got in the HTML file, so i thought that maybe html was finished loading before the script, or the other way around, which would result in some undefined errors. But that doesnt appear to be the case, as the error is thrown when i try to edit the text in the input areas as well.

Honestly i've got no idea about why it happens, and i've been through a lot of googling, where i found people with similar issues, i've tried their solutions, but it doesnt seem to work for me.

So please help, thanks in advance.

edit: so appareantly the issue wasnt on line 4 as the console said, but rather on line 6, where i was trying to access the value of a control.

Hi @jAnderson you are using the wrong way to get the value of formControl. you have to add formGroup name before value. something like this

 <p>{{loginForm.value.name}}</p>

this will definitely help you.

Make sure the property name maps a formControlName in your template. Initialize each property with a ' ' value, or the initial value you want it  Read-Only. Returns an array that represents the path from the top-level form to this control. Each index is the string name of the control on that level. formDirective: any: Read-Only. The top-level directive for this group if present, otherwise null. validator: ValidatorFn | null: Read-Only

you can get the value by formControl as

<p>{{username.value}}</p>

or by formGroup

<p>{{loginForm.value.name}}</p>

this will work both ways.

FormGroup: Cannot read property 'valid' of undefined type="text" formControlName="lastName" placeholder="Sobrenome" [class.invalid]="! Angular version: ng-multiselect-dropdown version: Description of issue: Steps to reproduce: Expected result: Actual result: Demo: Please share sample code link using StackBlitz or codesandbox Any relevant code:

use a safe navigation or ngif to handle it on the template if name is not defiend,

<p>{{name?.value}}</p>

FormControlName TypeError: Cannot read property 'value' of undefined - angular​. formControlName: Cannot read property 'value' of undefined. I'm currently trying to complete angulars basics guides, and i'm currently having some issues with reactive forms. Line 4 in my HTML is throwing this error: ERROR TypeError: Cannot read property 'value' of undefined.

There are two reasons for this error.

  1. you have no public name property in your class, create a getter for name

    get name() {
        return this.loginForm.get('name')
    }
    
  2. Use safe navigation in your template while accessing an Object's property, it may happen that the Object itself is not initialized while you are trying to access one of its property.

    <p>{{name?.value}}</p>
    

ERROR TypeError: Cannot read property 'value' of undefined” - angular. of Birth:</h4> <input type="date" formControlName="dob" class="text-control"  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

You can use {{loginForm}}. it'll give you direct value of all form. and what if you want to access the address then you can use {{loginForm.value.address}}.

formControlName="name" - This is what's known as a FormControl and it's Now that our imports and component property is set we can create the error like “ERROR TypeError: Cannot read property 'invalid' of undefined”. Property Description; control: FormControl: Read-Only. Tracks the FormControl instance bound to the directive. @Input('formControlName') name: string: Tracks the name of the FormControl bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray. @Input('disabled') isDisabled: boolean: Write-Only

i have read Doc about reactive form, after i did a demo,i found a bug about <​input type="text" class="form-control" formControlName="a"> <input what the browser console was "Cannot read property 'controls' of undefined  Matselect - Cannot read property 'nativeElement' of undefined #7959. Read more about our automatic conversation locking policy.

Property, Description. control: FormControl, Read-Only. Tracks the FormControl instance bound to the directive. @Input('formControlName') name: string  ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'ngDoCheck' of null I found that happen in file flex-layout.es5.js line 2906. The piece of code is

Angular cannot read property push of undefined when posting to <input type="​date" formControlName="lastFed" class="form-control"> </div>  OK, the component acts like a taxonomy. You select the parent before its children. So in the test below it selects Fruit, then Apple, then Red and Yellow all from mat-select components defined in the template.

Comments
  • name is undefined. You can use {{name?.value}} instead, which will only try to read value if name is not null / undefined
  • In that case the value doesnt get updated if i change the value of the input element. edit: people below me have explained this.
  • Thank you very much!, this fixes whatever issues i had, but its strange that the console said the error was on line 4, when it was happening on line 6.