[英]How to convert embed/nested FormGroup to FormData
This is my Form Group:这是我的表单组:
this.shopGroup = this.fb.group({
_user: [''],
name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
url_name: [''],
desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])],
photos: [''],
currency: ['Real'],
language: ['Português do Brasil'],
address: this.fb.group({
zipcode: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])],
street: ['', Validators.compose([Validators.required, Validators.maxLength(70)])],
number: [null, Validators.compose([Validators.required, Validators.max(99999)])],
complement: ['', Validators.maxLength(30)],
district: ['', Validators.compose([Validators.required, Validators.maxLength(60)])],
state: ['', Validators.required],
city: ['', Validators.compose([Validators.required, Validators.maxLength(70)])]
}),
status: [true],
created_at: [new Date()],
updated_at: [new Date()]
});
I need to convert it to a FormData because I'm uploading images to server (Multer package), however, I'm not sure how to handle address
group like a new object inside shopGroup
form data.我需要将其转换为 FormData,因为我正在将图像上传到服务器(Multer 包),但是,我不确定如何处理
address
组,就像shopGroup
表单数据中的新对象一样。 Here is what I'm doing to convert from FormGroup to FormData (address not working):这是我从 FormGroup 转换为 FormData 所做的事情(地址不起作用):
const shopData: any = new FormData();
shopData.append('name', shopGroup.get('name').value);
shopData.append('zipcode', shopGroup.get('address').get('zipcode').value);
...
How to make the conversion (Json to FormData) and deal with embed/nested objects like address
?如何进行转换(Json 到 FormData)并处理像
address
这样的嵌入/嵌套对象?
Okay, I've found a function for converting JSON objects to FormData:好的,我找到了一个将 JSON 对象转换为 FormData 的函数:
convertJsontoFormData(jsonObject: Object, parentKey, carryFormData: FormData): FormData {
const formData = carryFormData || new FormData();
let index = 0;
for (var key in jsonObject) {
if (jsonObject.hasOwnProperty(key)) {
if (jsonObject[key] !== null && jsonObject[key] !== undefined) {
var propName = parentKey || key;
if (parentKey && this.isObject(jsonObject)) {
propName = parentKey + '[' + key + ']';
}
if (parentKey && this.isArray(jsonObject)) {
propName = parentKey + '[' + index + ']';
}
if (jsonObject[key] instanceof File) {
formData.append(propName, jsonObject[key]);
} else if (jsonObject[key] instanceof FileList) {
for (var j = 0; j < jsonObject[key].length; j++) {
formData.append(propName + '[' + j + ']', jsonObject[key].item(j));
}
} else if (this.isArray(jsonObject[key]) || this.isObject(jsonObject[key])) {
this.convertJsontoFormData(jsonObject[key], propName, formData);
} else if (typeof jsonObject[key] === 'boolean') {
formData.append(propName, +jsonObject[key] ? '1': '0');
} else {
formData.append(propName, jsonObject[key]);
}
}
}
index++;
}
return formData;
}
isArray(val) {
const toString = ({}).toString;
return toString.call(val) === '[object Array]';
}
isObject(val) {
return !this.isArray(val) && typeof val === 'object' && !!val;
}
This should get you started - although, you'll need to make it recursive to deal with nested FormData as you mentioned.这应该可以帮助您入门 - 不过,您需要使其递归处理嵌套的 FormData,如您所提到的。
const shopData = Object.keys(this.shopGroup.value).map(function (key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(form.value[key]);
}).join('&');
也应该可以通过这种方式从 html-form 创建FormData
对象:
const formData = new FormData(<HTMLFormElement>document.getElementById('formId'));
Solution 1. Simplest solution解决方案 1. 最简单的解决方案
formGroupToFormData(formData: FormData, formGroup: FormGroup) {
for (let key in formGroup.controls) {
console.log(formGroup.controls[key])
if (formGroup.controls[key] instanceof FormGroup) {
this.formGroupToFormData(formData, formGroup.controls[key] as FormGroup);
}
else {
formData.append(key, formGroup.controls[key].value);
}
}
}
but Solution 1 doesn't cover FormGroup nested in a FormArray
eg但解决方案 1 不包括
FormGroup nested in a FormArray
例如
arryForm: new FormArray([
this.fb.group({ fff: ['group 1'] }),
this.fb.group({ fff: ['group 2'] }),
])
Solution 2: covers FormArray
and also FormGroup and FormControl
nested in a FormArray
解决方案 2:涵盖
FormArray
以及嵌套在FormArray
中的FormGroup and FormControl
formGroupToFormData(formData: FormData, formGroup: FormGroup) {
for (let key in formGroup.controls) {
if (formGroup.controls[key] instanceof FormGroup) {
this.formGroupToFormData(formData, formGroup.controls[key] as FormGroup);
}
else if (formGroup.controls[key] instanceof FormArray) {
if ((formGroup.controls[key] as FormArray).controls[0] instanceof FormControl) {
formData.append(key, (formGroup.controls[key] as FormArray).value);
}
else {
for (let formControl of (formGroup.controls[key] as FormArray).controls) {
if (formControl instanceof FormGroup)
this.formGroupToFormData(formData, formControl as FormGroup);
else {
formData.append(key, formControl.value);
}
}
}
}
else {
formData.append(key, formGroup.controls[key].value);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.