无法使用构造函数填充FormData
无法使用构造函数填充FormData
提问于 2019-01-19 07:50:27
在我的角度应用程序中，我有以下简单的形式：
<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的loginForm访问这些值时，它按预期工作：
login() {
console.log(this.loginForm.value); // {username: "asd", password: "xyz"}
}但是，我想使用FormData构造函数从值创建一个FormData对象。
FormData构造函数可以接受HTMLFormElement参数，如其文档中所解释的那样
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确实是空的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-19 08:08:50
使用FormData.entries()，它将返回一个iterator，您可以使用它来查看表单中的数据。请注意，我已经在vanilla中演示了我的示例。
参考文献：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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54265116
复制相关文章
相似问题
腾讯云开发者
