无法使用构造函数填充 FormData [重复]

Question

在我的 Angular 应用程序中，我有以下简单的形式：

<form [formGroup]="loginForm" (submit)="login()">
  <div id="container-credentials">
    <input type="text" name="username" formControlName="username">
    <input type="password" name="password" formControlName="password">
  </div>
</form>

当我使用名为loginForm 的FormGroup 访问值时，它按预期工作：

login() {
    console.log(this.loginForm.value); // {username: "asd", password: "xyz"}
}

但我想使用 FormData 构造函数从值创建一个 FormData 对象。

FormData 构造函数可以接受 HTMLFormElement 参数，如其docs 中所述：

一个 HTML 元素 — 当指定时，FormData 对象将是 使用 name 属性填充表单的当前键/值 键的每个元素及其提交的值的值。 它还将对文件输入内容进行编码。

所以我尝试在我的表单中添加id：

<form id="myForm" [formGroup]="loginForm" (submit)="login()">

然后在login():

const myFormElement = document.getElementById('myForm');
const data = new FormData(myFormElement as HTMLFormElement);
console.log(JSON.stringify(data)); // {}

但在这种情况下，FormData 是空的。

我也尝试过直接从模板传递表单：

<form [formGroup]="loginForm" (submit)="login($event.target)">

然后：

login(target) {
    console.log('Target: ' + target); // Target: [object HTMLFormElement]
    const data = new FormData(target);
    console.log(JSON.stringify(data)); // {}
}

还是空的。

我也尝试过使用@ViewChild 和ElementRef，结果是一样的。

我知道我可以使用FormData 方法一一添加值，例如append() 或set()，但我也想从更复杂的结构创建FormData，这将是最简单的方式（如果有效）。

我在这里错过了什么？

非常感谢任何建议。

编辑：

我尝试在所有情况下都以这种方式检查FormData：

for (const key of Object.keys(formData)) {
  console.log('Key: ' + key);
  console.log('Value: ' + formData[key]);
}

我没有输出，我认为这也表明FormData 确实是空的。

Answer 1

使用FormData.entries() 会返回一个iterator，您可以使用它来浏览表单中的数据。请注意，我已经在 vanilla JS 中演示了我的示例。

参考：https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

function login(){
   var form = document.getElementById("loginForm");
   var data = new FormData(form);
   var formData = {};
   for(var pair of data.entries()) {
       formData[pair[0]] = pair[1]; //To convert to object
   }
   console.log(formData);
   return false;
}

<form id="loginForm" name="loginForm" onsubmit="return login()">
  <div id="container-credentials">
    <input type="text" name="username" formControlName="username">
    <input type="password" name="password" formControlName="password">
    <input type="submit" value="submit">
  </div>
</form>