formControlName: Cannot read property 'value' of undefined

user_4723936 0
Viewed 7532

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.

angular-reactive-forms angular
5 Answers

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.

user_75971650

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.

user_61276720

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

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

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>
user_49764220

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

user_100710070
Related