formControlName: Cannot read property 'value' of undefined

Question

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.

name is undefined. You can use {{name?.value}} instead, which will only try to read value if name is not null / undefined — user184994
– user184994, Commented Nov 1, 2018 at 10:20
In that case the value doesnt get updated if i change the value of the input element. edit: people below me have explained this. — jAndersen
– jAndersen, Commented Nov 1, 2018 at 10:26

Videsh Chauhan · Accepted Answer · 2018-11-01 10:25:39Z

5

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.

answered Nov 1, 2018 at 10:25

Videsh Chauhan

3712 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jAndersen Over a year ago

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.

Auqib Rather · Accepted Answer · 2018-11-01 11:26:03Z

2

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.

answered Nov 1, 2018 at 11:26

Auqib Rather

3961 silver badge11 bronze badges

Comments

Sajeetharan · Accepted Answer · 2018-11-01 10:22:05Z

0

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

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

answered Nov 1, 2018 at 10:22

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Ashish Ranjan · Accepted Answer · 2018-11-01 10:25:54Z

0

There are two reasons for this error.

you have no public name property in your class, create a getter for name
```
get name() {
    return this.loginForm.get('name')
}
```
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>
```

answered Nov 1, 2018 at 10:25

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Comments

Prashant · Accepted Answer · 2018-11-01 10:51:09Z

0

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

answered Nov 1, 2018 at 10:51

Prashant

95 bronze badges

Collectives™ on Stack Overflow

formControlName: Cannot read property 'value' of undefined

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related