formControlName：无法读取未定义的属性 'value'

Question

我目前正在尝试完成 angulars 基础知识指南，但我目前遇到一些反应形式的问题。

我的 HTML 中的第 4 行抛出此错误： 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
    })
  }
}

我已经尝试了使用 formbuilder 的各种变体，但我还没有能够让它工作。

数据显示在我在 HTML 文件中的输入控件中，所以我认为可能 html 在脚本之前完成加载，或者相反，这会导致一些未定义的错误。但事实并非如此，因为当我尝试编辑输入区域中的文本时也会抛出错误。

老实说，我不知道为什么会这样，而且我已经进行了大量的谷歌搜索，在那里我发现有类似问题的人，我已经尝试过他们的解决方案，但它似乎对我.

所以请帮忙，提前致谢。

编辑：很明显，问题并不像控制台所说的那样出现在第 4 行，而是出现在第 6 行，我试图访问控件的值。

Answer 1

如果name没有被defiend，使用安全导航或者ngif在模板上处理，

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

Answer 2

您好@jAnderson，您使用错误的方式获取 formControl 的值。您必须在值之前添加 formGroup 名称。像这样

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

这一定能帮到你。

Answer 3

这个错误有两个原因。

您的 class 中没有 public name 属性，为 name 创建一个 getter
```
get name() {
    return this.loginForm.get('name')
}
```
在访问对象属性时在模板中使用安全导航，当您尝试访问其属性之一时，可能会发生对象本身未初始化的情况.
```
<p>{{name?.value}}</p>
```

Answer 4

您可以使用{{loginForm}}。它会给你所有形式的直接价值。如果您想访问该地址怎么办，那么您可以使用 {{loginForm.value.address}}.

Answer 5

你可以通过formControl获取值as

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

或按 formGroup

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

这是双向的。

formControlName：无法读取未定义的属性 'value'

formControlName: Cannot read property 'value' of undefined

angular

angular-reactive-forms

formControlName：无法读取未定义的 属性 'value'

formControlName: Cannot read property 'value' of undefined

angular

angular-reactive-forms

formControlName：无法读取未定义的属性 'value'