如何从 FormGroup 获取值输入表单答案

【问题标题】：How to get value input form from FormGroup如何从 FormGroup 获取值输入表单
【发布时间】：2020-06-01 15:29:49
【问题描述】：

大家好，我想找到解决我问题的方法。我有一个像这样的 FormGroup ：

  profileForm  = new FormGroup({ 
    username   : new FormControl(),
    firstname  : new FormControl(),
    lastname   : new FormControl(),
    email      : new FormControl(),
    password   : new FormControl(),
  });

我想通过使用来获得价值：

const user = {
  firstname : this.profileForm.get('firstname').value,
  lastname  : this.profileForm.get('lastname').value,
  username  : this.profileForm.get('username').value,
  email     : this.profileForm.get('email').value,
  password  : this.profileForm.get('password').value
}
console.log(user)

但是每个输入表单我都得到了空值。但值存在于 HTML 表单输入中：

<input name="username" matInput placeholder="Username" formControlName="username" [readonly]="true" value="{{details?.data.username}}" >

帮我解决这个问题，谢谢。

【问题讨论】：

1.是否有一个提交按钮，之后您想从模板中检索这些值？ 2.value="{{details?.data.username}}"这里有什么详细信息？请创建一个Minimal, Complete, and Verifiable example。
你不需要使用 value={...}，删除它！你还没有 formControlName。我想您的输入包含在 <form [formGroup ]="profileForm "> 中，并且您在 profileForm.value 或 profileForm.getRawValue() 中具有完整值

标签： javascript angular mean

【解决方案1】：

您的错误是您访问了不包含值的 Formgroup（基本上是一个包含所有 formControls 的对象）。您应该是 Form 组的访问控制。一个例子：

this.profileForm.controls.username.value

【讨论】：

不，Nico，不要使用 fom.controls.username.value，使用 form.get('username').value 或 form.value.username
我也知道这两种选择。但是为什么推荐这些呢？
没有人确定 Angular 团队不会更改“表单对象”。想象一下，他们需要将控件放在“othersControls”数组中以进行改进（我确信他们没有考虑这个想法）。为了兼容性，他们将更改“get”方法以考虑此更改。所有使用“控件”的Angular应用程序都无法升级新版本的Angular，所有使用get方法的应用程序都可以毫无问题地升级。

【解决方案2】：

我认为value="{{details?.data.username}}" 对您没有绑定价值。它只是打印 dom 中的值。

我假设您从ngOnInit()（或可能在其他地方）获取数据details?.data.username，您可以像这样绑定到您的表单

this.profileForm.get('firstname').setValue(details?.data.username)

并从 html 中删除此 value="{{details?.data.username}}"。

【讨论】：

是的，我从 details?.data.username 获取数据来自 ngOnInit() 我试图删除 HTML 表单中的值并按照您的建议更改 .ts 文件，但它给了我错误 Property 'username' does not exist on type '(data: any) => any'.ts(2339)
改用details?.data["username"]。