首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular中展平嵌套的formGroups

在Angular中展平嵌套的formGroups,可以通过递归和自定义指令来实现。以下是一个完善且全面的答案:

展平嵌套的formGroups意味着将多个嵌套的FormGroup对象转换为一个扁平的FormGroup对象,以便更方便地处理表单数据。在Angular中,可以通过递归遍历嵌套的formGroups来实现展平。

首先,我们可以创建一个自定义指令,用于递归遍历嵌套的formGroups并将其展平。以下是一个示例代码:

代码语言:txt
复制
import { Directive, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Directive({
  selector: '[flattenFormGroup]'
})
export class FlattenFormGroupDirective implements OnInit {
  @Input('flattenFormGroup') formGroup: FormGroup;

  constructor() { }

  ngOnInit() {
    this.flattenFormGroup(this.formGroup);
  }

  private flattenFormGroup(formGroup: FormGroup) {
    Object.keys(formGroup.controls).forEach(key => {
      const control = formGroup.get(key);
      if (control instanceof FormGroup) {
        this.flattenFormGroup(control);
        Object.keys(control.controls).forEach(innerKey => {
          const innerControl = control.get(innerKey);
          formGroup.addControl(innerKey, innerControl);
        });
        formGroup.removeControl(key);
      }
    });
  }
}

在上述代码中,我们定义了一个名为flattenFormGroup的自定义指令,并使用@Input装饰器接收一个FormGroup对象作为输入。在指令的ngOnInit生命周期钩子中,我们调用flattenFormGroup方法来展平嵌套的formGroups。

flattenFormGroup方法使用Object.keys方法遍历formGroup的控件,并判断每个控件是否为FormGroup类型。如果是FormGroup类型,则递归调用flattenFormGroup方法,并将内部的控件添加到外部的formGroup中。最后,我们移除原始的嵌套控件。

要在Angular中使用这个自定义指令,需要在使用的组件中声明并将其应用到相应的formGroup上。以下是一个示例代码:

代码语言:txt
复制
<form [formGroup]="myFormGroup" flattenFormGroup>
  <!-- 表单控件 -->
</form>

在上述代码中,我们将自定义指令flattenFormGroup应用到myFormGroup上,以展平嵌套的formGroups。

展平嵌套的formGroups可以提高表单数据处理的灵活性和可维护性。它适用于需要处理复杂表单数据的场景,例如动态表单、表单向导等。

腾讯云提供了一系列与Angular开发相关的产品和服务,例如云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

请注意,本答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,如有需要,请自行参考相关文档和资料。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一日一技:如何把多层嵌套列表

摄影:产品经理 有这样一个列表套列表数据结构: a = [1, 2, [3, 4, [5, 6, 7], 8], 9, [10, 11]] 现在想把它变为: b = [1, 2, 3, 4, 5,...其中, yieldfrom是从Python 3.3开始引入写法: yield from x # 等价于 for g in x: yield g 所以,当代码运行到 [x for x in...flat(a)] 时候,每一次循环都会进入到 flat生成器里面。...在 flat里面,对传入参数使用for循环进行迭代,如果拿到元素不是列表,那么就直接抛出,送到上一层。如果当前已经是最上层了,那么就再一次抛出给外面的列表推导式。...如果当前元素是列表,那么继续生成一个生成器,并对这个新生成器进行迭代,并把每一个结果继续往上层抛出。 最终,每一个数字都会被一层一层往上抛出给列表推导式,从而获得需要结果。

1.6K10

何在keras添加自己优化器(adam等)

2、找到keras在tensorflow下根目录 需要特别注意是找到keras在tensorflow下根目录而不是找到keras根目录。...一般来说,完成tensorflow以及keras配置后即可在tensorflow目录下python目录中找到keras目录,以GPU为例keras在tensorflow下根目录为C:\ProgramData...找到optimizers.pyadam等优化器类并在后面添加自己优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

44.8K30

何在JavaScript访问暂未存在嵌套对象

JavaScript 是个很神奇东西。但是 JavaScript一些东西确实很奇怪,让人摸不着头脑。...其中之一就是当你试图访问嵌套对象时,会遇到这个错误 Cannot read property 'foo' of undefined 在大多数情况下,处理嵌套对象,通常我们需要安全地访问最内层嵌套值。...user.personalInfo.name : null; 如果你嵌套结构很简单,这是可以,但是如果数据嵌套五或六层深,那么你代码就会看起很混乱: let city; if ( data..., Lodash 和 Ramda,可以做到这一点。...但是在轻量级前端项目中,特别是如果你只需要这些库一两个方法时,最好选择另一个轻量级库,或者编写自己库。

8K20

尝鲜 ES2019 新功能

在某些时候,数组元素还是数组,这些类型数组称为嵌套数组。 要取消数组嵌套它们),我们不得不使用递归。现在引入 flat(),可以用一行代码完成。...通常在 JavaScript ,数组深度可以为无穷大,或者直到内存不足为止。假设一个数组嵌套深度为3,并且我们仅将其到深度 2,那么主数组仍然会存在一个嵌套数组。 句法 ?...用 flat() 平一个深度为3嵌套数组,参数深度为3。 如果将参数深度设为2,我们得到: ? 可以看到输出仍然有一个未数组。...flatMap() flatMap() 用于嵌套数组并根据给出像 map() 这样函数更改值。此函数作用于数组并用一个回调函数作为参数。回调函数用于指示数组应该怎样被。...在此例,我们逐个显示 map 和 flatMap 以显示两个函数之间差异。 map() 返回嵌套数组,而flatMap() 输出除了数组外,还与 map 结构相同。

2K40

【Python】PySpark 数据计算 ③ ( RDD#reduceByKey 函数概念 | RDD#reduceByKey 方法工作流程 | RDD#reduceByKey 语法 | 代码示例 )

, 指的是 二元元组 , 也就是 RDD 对象存储数据是 二元元组 ; 元组 可以看做为 只读列表 ; 二元元组 指的是 元组 数据 , 只有两个 , : ("Tom", 18) ("Jerry..., 统计文件单词个数 ; 思路 : 先 读取数据到 RDD , 然后 按照空格分割开 再 , 获取到每个单词 , 根据上述单词列表 , 生成一个 二元元组 列表 , 列表每个元素 键...字符串 列表 , 然后数据解除嵌套 ; # 通过 flatMap 文件, 先按照 空格 切割每行数据为 字符串 列表 # 然后数据解除嵌套 rdd2 = rdd.flatMap(lambda..., 先按照 空格 切割每行数据为 字符串 列表 # 然后数据解除嵌套 rdd2 = rdd.flatMap(lambda element: element.split(" ")) print("...查看文件内容效果 : ", rdd2.collect()) # 将 rdd 数据 列表元素 转为二元元组, 第二个元素设置为 1 rdd3 = rdd2.map(lambda element

33720

必知必会8个Python列表技巧

4 颠倒列表 Python列表是有序数据结构,正因如此,列表中元素顺序很重要,有些时候我们需要翻转列表中所有元素顺序,可以通过Python切片操作,用::-1来快捷地实现: ?...7 嵌套列表   有些情况下我们会遇到一些嵌套列表,其每个元素又是各自不同列表,这种时候我们就可以利用列表推导式来把这种嵌套列表,如下面2层嵌套例子: ?...额外补充:   原作者这里只考虑到两层嵌套列表,如果是更多层嵌套,就需要有多少层写多少for循环,比较麻烦,其实还有一种更好方法,我们可以使用pip install dm-tree来安装tree这个专门用于嵌套结构库...,可以任意层嵌套列表,使用例子如下: ?...8 检查唯一性   如果你想要查看列表值是否都是唯一值,可以使用Pythonset数据结构特点,譬如下面的例子: ?

1.1K10

必知必会8个Python列表技巧

2.1 map()使用 Python内置map()函数使得我们可以将某个函数应用到可迭代对象内每一个元素之上。...,可以通过Python切片操作,用::-1来快捷地实现: 图6 5 检查列表中元素存在情况 有些情况下我们想要检查列表是否存在某个元素,这种时候就可以使用到Pythonin运算符,譬如说我们有一个记录了所有比赛获胜队伍名称列表...,就可以参考下面的例子: 图8 7 嵌套列表 有些情况下我们会遇到一些嵌套列表,其每个元素又是各自不同列表,这种时候我们就可以利用列表推导式来把这种嵌套列表,如下面2层嵌套例子: 图...9 额外补充: 原作者这里只考虑到两层嵌套列表,如果是更多层嵌套,就需要有多少层写多少for循环,比较麻烦,其实还有一种更好方法,我们可以使用pip install dm-tree来安装tree这个专门用于嵌套结构库...,可以任意层嵌套列表,使用例子如下: 图10 8 检查唯一性 如果你想要查看列表值是否都是唯一值,可以使用Pythonset数据结构特点,譬如下面的例子: 图11 以上就是本文全部内容

88950

Hudi Transformers(转换器)

有几种开箱即用转换器,您也可以构建自己自定义转换器类。 SQL查询转换器 您可以传递要在写入期间执行 SQL 查询。...FROM WHERE trip_type='personal_trips'; SELECT * FROM tmp_personal_trips; Flattening转换器 该转换器可以嵌套对象...它通过以嵌套方式为内部字段添加外部字段和 _ 前缀来传入记录嵌套字段。 目前不支持扁平化数组。...示例模式可能如下所示,其中名称是原始源 StructType 嵌套字段 age as intColumn,address as stringColumn,name.first as name_first...下面的示例首先传入记录,然后根据指定查询进行 sql 投影: --transformer-class org.apache.hudi.utilities.transform.FlatteningTransformer

1.6K20

AngularDart Material Design 弹出框 顶

注意事项: 弹出窗口关闭和打开会自动延迟以添加动画 利用PopupInterface定义enforceSpaceConstraints。 如果内容大小太多添加滚动到页面,这将非常有用。...对于在示例测试案例OnPush,它没有设置ChangeDetectionStrategy。...如果内容发生变化并需要重新调整位置,请使用在PopupInterface也定义trackLayoutChanges。 材质弹出窗口还支持延迟/延迟加载内容。...offsetX int  将x偏移设置为弹出窗口最终定位位置。 offsetY int  将y偏移设置为弹出窗口最终定位位置。...与Angular提供程序类似,它支持首选位置嵌套列表。 弹出窗口将位置列表并选择第一个适合屏幕位置。 slide String  弹出缩放方向。

2.4K30

matplotlib之pyplot模块——饼图(pie():圆环图(donut)、二层圆环图、三层圆环图(旭日图))「建议收藏」

大家好,又见面了,我是你们朋友全栈君。 在matplotlibpie()不单可以绘制饼图,还可以绘制圆环图(donut)。...在matplotlib之pyplot模块之饼图(pie():基础参数,返回值),我们提到了wedgeprops参数,通过wedgeprops参数传递饼块对象Wedgewidth参数即可快速实现圆环图...案例提供了两种写法,一种使用numpy处理数据,一种使用Python内置方法,主要牵扯到嵌套列表分组求和,嵌套列表操作。...plt.title('双层圆环图') plt.subplot(122) # 使用Python内置方法处理数据 # 按分组求和作为内层圆环数据源 sums = [sum(i) for i in data] # 数据作为外层圆环数据源...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

2.2K20

经验丰富程序员才知道15种高级Python小技巧

首先按年龄分类,然后按名字分类,使用operator.itemgetter()从列表每个字典获取年龄和名字字段,这样你就会得到想要结果: [ {<!...比起常规类或其他替代方法(返回多个值或字典),它有着更多优点: 数据类需要很少代码1. 可以比较数据类,因为 eq 可以实现此功能1. 数据类需要类型提示,减少了发生错误可能性1....上面Python 3.9合并可以重写为: merged = dict1 | dict2 8.返回多个值 Python函数在没有字典,列表和类情况下可以返回多个变量,它工作方式如下: defget_user...14.嵌套列表 有些情况下我们会遇到一些嵌套列表,其每个元素又是各自不同列表,这种时候我们就可以利用列表推导式来把这种嵌套列表,如下面2层嵌套例子: nested_list = [[1,2...,如果是更多层嵌套,就需要有多少层写多少for循环,比较麻烦,其实还有一种更好方法,我们可以使用pip install dm-tree来安装tree这个专门用于嵌套结构库,可以任意层嵌套列表

1.1K60

path是什么意思啊_globalmapper转换投影

投影 投影是JMESPath关键特性之一。它允许您将表达式应用于元素集合。有五种投影: 列表投影 切片投影 对象投影 投影 过滤投影 处理投影需要注意点 投影分为两个步骤。...写法说明 []:将子列表到父列表 ....:取字典 *:遍历每个元素 列表投影 在一个列表嵌套了字典,而且每一个元素都是一个json对象,它有2个key键,分别是first、last,如果你想拿到first下所有value怎么办呢?...而对于null,是不会添加到最终返回结果数组里,所以最终结果只有[2, 3]。 投影 JMESPath表达式可以使用多个投影。...[]会创建一个投影,因此投影右侧任何内容都会投影到新创建平列表

1.9K20

CNNFlatten操作 | Pytorch系列(七)

边缘上白色对应于图像顶部和底部白色。 在此示例,我们将平整个张量图像,但是如果我们只想张量内特定轴怎么办?这是使用CNN时通常需要操作。...让我们看看如何使用PyTorch代码张量特定轴。...张量特定轴 在CNN输入张量形状文章《深度学习关于张量阶、轴和形状解释 | Pytorch系列(二)》,我们了解了一个卷积神经网络张量输入通常有4个轴,一个用于批量大小,一个用于颜色通道...这意味着我们只想拉平张量一部分。我们要使用高度和宽度轴和颜色通道轴。...[3., 3., 3., 3.] ]) 总结: 现在,我们应该对张量操作有了一个很好了解。

6.3K51

temptation系列_dramatical murder攻略

有五种投影: 列表投影 切片投影 对象投影 投影 过滤投影 处理投影需要注意点 投影分为两个步骤。左侧(LHS)创建一个初始值JSON数组。...写法说明 []:将子列表到父列表 ....:取字典 *:遍历每个元素 列表投影 在一个列表嵌套了字典,而且每一个元素都是一个json对象,它有2个key键,分别是first、last,如果你想拿到first下所有value怎么办呢?...而对于null,是不会添加到最终返回结果数组里,所以最终结果只有[2, 3]。 投影 JMESPath表达式可以使用多个投影。...[]会创建一个投影,因此投影右侧任何内容都会投影到新创建平列表

1.7K30

【Python】PySpark 数据计算 ⑤ ( RDD#sortBy方法 - 排序 RDD 元素 )

, 统计文件单词个数并排序 ; 思路 : 先 读取数据到 RDD , 然后 按照空格分割开 再 , 获取到每个单词 , 根据上述单词列表 , 生成一个 二元元组 列表 , 列表每个元素...文件 转为 RDD 对象 rdd = sparkContext.textFile("word.txt") print("查看文件内容 : ", rdd.collect()) # 通过 flatMap 文件..., 先按照 空格 切割每行数据为 字符串 列表 # 然后数据解除嵌套 rdd2 = rdd.flatMap(lambda element: element.split(" ")) print("...查看文件内容效果 : ", rdd2.collect()) # 将 rdd 数据 列表元素 转为二元元组, 第二个元素设置为 1 rdd3 = rdd2.map(lambda element...PySpark 版本号 : 3.4.1 查看文件内容 : ['Tom Jerry', 'Tom Jerry Tom', 'Jack Jerry Jack Tom'] 查看文件内容效果 : ['

29110

Druid 数据模式设计技巧

关系模型 ( Hive 或 PostgreSQL。) Druid 数据源通常等效于关系数据库表。...这样可以避免在"sales”表引用相同产品不同行上重复产品名称和类别。 而在 Druid ,通常使用完全数据源,这些数据源在查询时不需要 join。...Druid rollup 类似于在关系模型创建汇总表。 时间序列模型 ( OpenTSDB 或 InfluxDB。) 与时间序列数据库类似,Druid 数据模型需要时间戳。...Druid 列具有预先特定类型,而 Druid 暂时不支持嵌套数据。 在 Druid 建模日志数据提示: 如果你预先不知道要有哪些列,可以使用一个空白维度列表,然后自动检测维度列。...如果你嵌套了数据,请使用flattenSpec数据。 如果您日志数据主要具有分析用例,请考虑启用 rollup。

2.4K10

8个写JavaScript代码小技巧

把值数组值作为函数参数 有时候我们需要先把值放到数组,然后再作为函数参数进行传递。...把值数组值作为 Math 方法参数 当需要在数组中找到数字最大或最小值时,可以像下面这样做: // 查到元素 y 位置最大那一个值 const elementsHeight = [......嵌套数组 Array 有一个名为 Array.flat 方法,它需要一个表示深度参数来嵌套数组(默认值为 1)。但是如果你不知道深度怎么办,这时候只需要将 Infinity 作为参数即可。...防止代码崩溃 如果在代码存在不可预测行为,后果是难以预料,所以需要对其进行处理。 例如当你想要获取属性为 undefined 或 null 时,会得到 TypeError 错误。...传参好方法 在 ES6 可以把 模板字面量(Template literal) 当作是不带括号函数参数。这在进行格式化或转换文本时非常好用。

60120

分享 13 个有用 JavaScript 片段,提升你工作效率

在这篇文章,我将分享我发现它们有用 15 个 JavaScript 代码片段。 1. 不循环地重复字符串 此 JS 片段将展示如何在不使用任何循环情况下重复字符串。...数组区别 另一个很棒片段可以让你在数组脱颖而出。当您处理长数组并想了解该数组相似点或不同点时,这会派上用场。下面的示例代码将加深您理解,您可以在您 JS 项目中自由使用该代码。...].reverse().join(''); } console.log(Reverse("data")) //atad console.log(Reverse("Code")) //edoC 10、 深度数组...数组是将任何有序数组和二维数组转换为一维数组过程。...简而言之,您可以减少数组维数。您已经看过“数组”片段代码,但是深度数组又如何呢?当您有一个大有序数组并且正常对其不起作用时,此代码片段非常有用。为此,您需要深度平整。

14030
领券