angular - 表单控件名称 : Cannot read property 'value' of undefined

Question

我目前正在尝试完成 Angular 基础知识指南，并且目前在响应式(Reactive)表单方面遇到一些问题。

我的 HTML 中的第 4 行抛出此错误: 错误类型错误:无法读取未定义的属性“值”

组件.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>

组件.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
    })
  }
}

我尝试过使用表单构建器的各种变体，但我还没有能够使其工作。

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

老实说，我不知道为什么会发生这种情况，而且我进行了很多谷歌搜索，发现有人有类似的问题，我尝试过他们的解决方案，但它似乎对我不起作用。

所以请帮忙，提前致谢。

编辑:所以显然问题并不像控制台所说的那样出现在第 4 行，而是出现在第 6 行，我在其中尝试访问控件的值。

Answer 1

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

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

这肯定会对你有帮助。