javascript - 如何将嵌入/嵌套的 FormGroup 转换为 FormData
问题描述
这是我的表单组:
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 包),但是,我不确定如何像表单数据中address
的新对象一样处理组。shopGroup
这是我从 FormGroup 转换为 FormData 所做的事情(地址不起作用):
const shopData: any = new FormData();
shopData.append('name', shopGroup.get('name').value);
shopData.append('zipcode', shopGroup.get('address').get('zipcode').value);
...
如何进行转换(Json 到 FormData)并处理嵌入/嵌套对象,例如address
?
解决方案
好的,我找到了一个将 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;
}
推荐阅读
- php - laravel eloquent 如何使用多个“和”进行查询?
- testing - JMeter - 长时间均匀执行样本
- kubernetes - How to Enable KubeAPI server for HPA Autoscaling Metrics
- c++ - 将 Ceres 与带有 sse/avx 的库一起使用时出错
- xcode - 我无法在 CocoaPods 中进行“pod install”
- c# - 分配后列表意外清除
- git - 从 Git 存储库中排除文件类型的挂钩类型
- php - 在页脚中使用 Visual Composer 行
- php - Symfony 4.1:没有一个 App 类可以在单元测试中自动加载
- python - 使用 Pandas 对 DateTime 进行舍入