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>

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

loginForm

但是我想使用login() { console.log(this.loginForm.value); // {username: "asd", password: "xyz"} }构造函数根据值创建一个FormData对象。

FormData构造函数可以接受docs中所述的FormData参数：

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

所以我尝试将FormData添加到我的表单中：

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]); }确实为空。

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>

无法使用构造函数填充FormData

1 个答案: