<分区>
在我的 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 中所述。 :
An HTML element — when specified, the
FormDataobject will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.
所以我尝试将 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 确实是空的。