formdata 嵌套_如何将嵌入/嵌套的FormGroup转换为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.

Here is what I'm doing to convert from FormGroup to FormData (address not working):

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?

解决方案

Okay, I've found a function for converting JSON objects to 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;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值