Angular formControlName:无法读取属性'；价值'；未定义的

我目前正在尝试完成angulars基础指南，我目前在反应式表单方面遇到了一些问题

my HTML中的第4行引发以下错误：

错误类型错误：无法读取未定义的属性“值”

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>

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

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

老实说，我不知道为什么会发生这种情况，我在谷歌上搜索了很多次，在那里我找到了有类似问题的人，我尝试了他们的解决方案，但似乎对我不起作用

所以请帮忙，提前谢谢

---

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

如果名称未定义，请使用安全导航或ngif在模板上处理它

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

{{name？.value}

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

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

{{loginForm.value.name}

---

这肯定会对您有所帮助。

此错误有两个原因

如果类中没有公共的

name

属性，请为

name

get name() {
    return this.loginForm.get('name')
}

在访问对象的属性时在模板中使用安全导航，当您尝试访问其属性时，可能会发生对象本身未初始化的情况

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

{{name？.value}

---

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

您可以通过formControl获得值，如下所示

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

{{username.value}

或按表格分组

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

{{loginForm.value.name}

---

这将双向工作。

名称

未定义。您可以改为使用

{{name？.value}

，如果

name

不为null/undefined，它将仅尝试读取

value

。在这种情况下，如果我更改输入元素的值，值不会得到更新。编辑：我下面的人已经解释过了。非常感谢！，这修复了我遇到的任何问题，但奇怪的是，控制台说错误发生在第4行，而它发生在第6行。

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