如何将嵌入/嵌套 FormGroup 转换为 FormData

2023-12-23

这是我的表格组:

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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将嵌入/嵌套 FormGroup 转换为 FormData 的相关文章

  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 是否可以在 Angular Material Tooltip 中包含一个列表?

    基本上我想在我的工具提示中有一个 ul 元素 我正在使用 Angular 5 以及 Angular 5 的兼容材质 帕维尔 阿加科夫 Pavel Agarkov 的评论方向是正确的 为了让事情变得简单 创建一个自定义管道来自动将文本转换为项
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • IE 中的 XPath 查询使用从零开始的索引,但 W3C 规范是从一开始的。我应该如何处理差异?

    问题 我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码 以便使其也适用于其他浏览器 由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • Angular 模板验证表单

    我正在研究表单验证 我正在使用模板驱动的验证表单 其编码如下 现在工作正常 但是当我尝试添加时 username ngModel and password ngModel 在创建验证类的输入中 它向我显示一个错误 也请找到该错误 div c
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

随机推荐

  • 使用 Delphi 获取全文提要

    我正在开发一个 Delphi 程序 它通过组件 Indy idHTTP 读取提要的源代码 但是提要看起来并不完整 只显示其摘要 我的意思是提要不显示 内容 标签 我认为可以获得全文提要 因为我在互联网上找到了一些网站 例如http full
  • 如何在列表框中的项目之间添加填充?

    我想知道是否有办法在我的订单项之间添加填充 这是一种用于平板电脑的表单 每个表单之间的空间可以让您更轻松地选择不同的项目 有人知道我该怎么做吗 有一个ItemHeight财产 你必须改变DrawMode财产给OwnerDrawFixed使用
  • 无法使用 Ajax.BeginForm() 异步上传文件

    我正在尝试使用 Ajax BeginForm 上传文件 但没有成功 我的观点包含 using Ajax BeginForm UploadFile null new AjaxOptions HttpMethod POST UpdateTarg
  • 如何从 mongoose 中的实例方法访问静态方法?

    如何从 mongoose 中的实例方法访问静态方法 我有一个名为 Job 的工作模型 我想从实例方法 job start 调用静态方法 Job someStatic 如何从实例方法中的 this 获取对作业的引用 thanks 我发现通用地
  • 如何通过Weblogic Java API检索Weblogic的Deployment测试点

    我正在开发一个基于 JMX 的 Weblogic 健康监控代码库 我正在尝试获取所有部署测试点的列表 http地址 如下面的快照所示 并查看该网址是否可访问 有没有办法访问 Weblogic 的 Java API 中这些测试点的列表 他们在
  • 如何在 CMake 项目上运行 Visual Studio CPU 分析器?

    我正在尝试使用 Visual Studio 2022 及其分析工具来分析使用 CMake 项目构建的 C 应用程序 我以 RelWithDebInfo 模式和 MSVC x64 x64 工具集构建项目 我添加了这个片段 if MSVC se
  • 用于单元测试的模拟休息模板

    我想嘲笑一个RestTemplate在 Spring Boot 中 我在方法中进行 REST 调用 为了测试我正在创建的微服务的控制器 我想测试微服务控制器内的方法 例如 GetMapping value getMasterDataView
  • 更改 UISegmentedControl 的字体大小

    谁能告诉我如何更改字体类型和大小UISegmentedControl 我遇到了同样的问题 此代码设置整个分段控件的字体大小 类似的东西可能适用于设置字体类型 请注意 此功能仅适用于 iOS5 Obj C UIFont font UIFont
  • ChartJS 禁用图表区域外的网格线

    我试图隐藏在图表区域之外绘制的网格线 所以基本上类似于下面的选项 但对于图表区域之外 gridLines drawOnChartArea false 想必您正在寻求禁用刻度线 这可以通过drawTicks财产 new Chart docum
  • ASP.NET MVC2 中的单用户登录非常简单?

    我正在构建我的网站 并且我想限制我的网站的一部分 管理部分 正常公开显示 我正在使用 LINQ 进行数据库访问 我有一个 Service 类来处理通过 LINQ 对数据库的调用 我的整个网站都在运行 除了登录部分 到目前为止我已经only能
  • 隐藏和显示 TableLayoutPanel 的单元格

    我的表格布局面板有一列三行 一个停靠在每个单元格的 填充 面板上 现在我希望能够隐藏 显示行 我希望任何时候都只显示一行 基于用户对某些单选按钮的选择 并且我希望调整大小以使其填充 TableLayoutPanel 的所有区域 我怎样才能做
  • Haskell 中的异常处理

    我需要帮助来理解三个 Haskell 函数的用法 try Control Exception try Exception e gt IO a gt IO Either e a catch Control Exception catch Ex
  • AngularJS 中使用 q 的多个链式延迟函数停止返回数据

    我试图将多个延迟函数调用链接在一起 以便下一个调用可以获得前一个 deferred resolve 的结果 当我将两个以上的调用链接在一起时 数据将停止返回 这是角度控制器内的基本代码 scope runAsync function var
  • 不同应用程序的相同密钥库[重复]

    这个问题在这里已经有答案了 我对所有已发布的应用程序始终使用相同的密钥库和相同的别名密钥 这是一个正确的选择 或者我应该为每个发布的应用程序使用不同的别名吗 我还没有找到有关正确使用密钥库的真正明确的信息 密钥库文件或应用程序的签名表示某些
  • Helm 3.0.2 试运行 + 稳定/prometheus-operator?这应该有效吗?

    使用 Helm v3 0 2 新的 Kubernetes v1 14 9 集群 仅供参考 我已经添加了稳定的存储库 helm repo add stable https kubernetes charts storage googleapi
  • JavaScript 将 HTML 表格导出到 Excel

    我需要 JavaScript 将 HTML 表格导出到 Excel 我已经尝试过这个脚本 但它只导出一张表
  • Laravel Eloquent ORM 中的自然 ORDER

    我如何在 Eloquent ORM 中获得 自然顺序 在表中我有 文本 列 字符串 正常顺序 Model orderBy text value 1 value 12 value 23 value 3 value 8 我需要这个 value
  • 运行 django 本地服务器时出错:`__init__() 得到意外的关键字参数 'tcp_nodelay'`

    一切都很好并且始终运行没有问题 现在 当我从浏览器加载应用程序时出现错误 似乎与代码无关 因为我跳到了最旧的分支上 并且得到了相同的错误 这是我的 python 和 django 版本 python version Python 3 6 0
  • 进行带有超时的 EJB 调用

    我有一个EJBA调用 EJBB UI 等待响应的时间不应超过 30 秒 如果某些数据丢失 它应该返回部分响应 如何在 EJB 上定义超时 30 秒的时间限制 B 我可以定义EJBB as Asynchronous返回Future 然后做Fu
  • 如何将嵌入/嵌套 FormGroup 转换为 FormData

    这是我的表格组 this shopGroup this fb group user name Validators compose Validators required Validators maxLength 60 url name d