Question

我目前正在尝试完善角度基础指南，而我目前在反应式方面存在一些问题。

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

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

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

这肯定会对您有所帮助。

Answer 2

您可以通过formControl获取值

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

或通过formGroup

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

这将同时起作用。

Answer 3

如果名称不正确，请使用安全的导航或ngif在模板上对其进行处理，

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

Answer 4

此错误有两个原因。

您的班级没有公共的name属性，请为name创建一个吸气剂
```
get name() {
    return this.loginForm.get('name')
}
```
在访问对象的属性时在模板中使用安全导航，可能会在您尝试访问其属性之一时未初始化对象本身。
```
<p>{{name?.value}}</p>
```

Answer 5

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

formControlName：无法读取未定义的属性“值”

5 个答案: