Javascript 如何将嵌入/嵌套FormGroup转换为FormData
这是我的表格组:Javascript 如何将嵌入/嵌套FormGroup转换为FormData,javascript,angular,forms,typescript,multipartform-data,Javascript,Angular,Forms,Typescript,Multipartform Data,这是我的表格组: 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
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()]
});
我需要将其转换为FormData,因为我正在将图像上载到服务器(Multer软件包),但是,我不确定如何处理地址
组,就像shopGroup
表单数据中的新对象一样。
以下是我将FormGroup转换为FormData的步骤(地址不起作用):
如何进行转换(Json到FormData)和处理嵌入/嵌套对象,如
address
?,这应该是您的入门之道-不过,您需要使其递归以处理您提到的嵌套FormData
const shopData = Object.keys(this.shopGroup.value).map(function (key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(form.value[key]);
}).join('&');
好的,我找到了一个将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;
}
convertJsontoFormData(jsonObject:Object,parentKey,carryFormData:FormData):FormData{
const formData=carryFormData | | new formData();
设指数=0;
for(jsonObject中的var键){
if(jsonObject.hasOwnProperty(键)){
if(jsonObject[key]!==null&&jsonObject[key]!==未定义){
var propName=parentKey | | key;
if(parentKey&&this.isObject(jsonObject)){
propName=parentKey+'['+key+']';
}
if(parentKey&&this.isArray(jsonObject)){
propName=parentKey+'['+索引+']';
}
if(jsonObject[key]instanceof File){
append(propName,jsonObject[key]);
}else if(文件列表的jsonObject[key]实例){
对于(var j=0;j
还可以通过以下方式从html表单创建FormData
对象:
const formData = new FormData(<HTMLFormElement>document.getElementById('formId'));
const formData=new formData(document.getElementById('formId');
你能看看我的答案吗?我认为它必须涵盖大多数情况。谢谢,这非常有用。这里的parentKey和carryFormData参数是什么?
const formData = new FormData(<HTMLFormElement>document.getElementById('formId'));