如何从 FormGroup 获取值输入表单

Question

美好的一天，伙计们，我想找到解决我问题的方法。 我有一个这样的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}}" >

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

Answer 1

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

this.profileForm.controls.username.value

Answer 2

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

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

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

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