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

如何在现有的formArray上添加新的行?角度

在Angular中,可以使用FormArray来处理动态表单中的数组字段。要在现有的FormArray上添加新的行,可以按照以下步骤进行操作:

  1. 首先,获取到要添加新行的FormArray控件。可以通过在组件中使用get方法来获取,例如:this.myForm.get('myFormArray')
  2. 接下来,创建一个新的FormGroup对象,表示新行的表单控件组。可以使用new FormGroup()来创建。
  3. 在新的FormGroup对象中,为每个字段创建FormControl或者其他表单控件。例如,如果新行有一个名为name的输入字段,可以使用new FormControl()来创建该字段的表单控件。
  4. 将新的FormGroup对象添加到FormArray中,可以使用FormArray的push方法。例如:this.myForm.get('myFormArray').push(newRowFormGroup)

完成以上步骤后,新的行将被添加到现有的FormArray中。

以下是一个示例代码:

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="myFormArray">
        <div *ngFor="let row of myFormArray.controls; let i = index" [formGroupName]="i">
          <input formControlName="name" placeholder="Name">
        </div>
      </div>
      <button (click)="addNewRow()">Add Row</button>
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myFormArray: new FormArray([]),
    });
  }

  get myFormArray() {
    return this.myForm.get('myFormArray') as FormArray;
  }

  addNewRow() {
    const newRowFormGroup = new FormGroup({
      name: new FormControl(''),
    });

    this.myFormArray.push(newRowFormGroup);
  }
}

在上述示例中,我们创建了一个包含一个FormArray的表单。每个FormArray中的行都由一个FormGroup表示,其中包含一个名为name的输入字段。通过点击"Add Row"按钮,可以动态地添加新的行。

请注意,上述示例中的代码仅用于演示如何在现有的FormArray上添加新的行,实际应用中可能需要根据具体需求进行适当的修改。

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

相关·内容

Angular8稳定版修改概述

新功能 差分加载 根据您browserlist 文件,在构建期间,Angular将为其创建单独包polyfills。所以基本你会有: ? 使用此功能将减小捆绑包大小。 ?...但这是如何工作? 基本,Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...您可以使用以下命令添加Bazel支持: ng add @ angular / bazel 或者,您也可以使用Bazel创建一个应用程序: npm install -g @ angular / bazel...该团队现在在升级时添加了对$ location服务支持。添加了angular/common/upgrade这个包。 允许从位置服务检索状态功能。 添加跟踪所有位置更改功能。...阅读Angular Doc上有关服务工作者更多信息。 表单改进 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。

4.5K20
  • 互联网账户系统如何设计(上篇)?

    遗憾是,很多公司在类似以上简单账户逻辑设计都比较混乱,如有的公司将账户直接绑定在用户信息表、有些直接更新账户余额,没有完整记录账户流水或账户流水记录业务信息缺乏等,这种情况即使业务没有多元化发展...显然,这样还不能让逻辑完全运行起来,因为增加了账户相应地交易逻辑与资金逻辑都需要进行相应改变才,以上业务场景中原来余额充值只需要调用余额账户记账一次,现在需要根据充返逻辑再调用余额返账户记账一次;...在A公司租车业务中,从参与角色角度来看涉及逻辑并不算太复杂,只有“用户、车、租车公司(内部可称租车业务线)”,而从交易场景看,用户缴纳押金、预存余额及余额消费都只是单向C->B交易模型,如果不考虑公司层在线交易账户体系...另外如果除了租车业务、打车业务外又尝试了别的业务,直播之类。业务类型完全不同,且财务本身就要求进行分类的话,只能重新设计账户逻辑了;但,从某种角度看这类账户逻辑实质又是与之前业务存在共性。...事实要达到这样效果是很难,需要在系统平台层面进行良好地系统及业务架构设计,并且确保在制定业务规则时遵循一定制度及规范才

    2.4K35

    2021年第一盆冷水:有人说别太把图神经网络当回事儿

    原因如下: 学术动机阻碍进步 愤世嫉俗者认为机器学习论文是通过以下方式炮制: 使用已有的算法; 添加层 / 超参数,用数学形式描述其重要性; 对超参数执行网格搜索,直到该新方法打败被模仿那个基线方法...这很难,因为你计算机内存是由 1 和 0 组成一维数组,并且图没有明显一维映射。 这种情况在我们更新图(添加 / 移除节点 / 边缘)时会变得更加困难。...这在设计就很慢,你可以使用 Ruby、C 或者汇编语言编写,但还是很慢,这是因为硬件内存读取速度就很慢。 这种布局主要优势在于其添加节点 O(1)。...此外,逐渐增加节点也很简单,只需要获取现有的嵌入,添加一个节点,然后在数据执行一个 epoch。 随机游走采样。...另一方面,我们不应该再专注于添加层,并在相同小型数据集上进行测试。没人在乎这个。

    47720

    2021年第一盆冷水:有人说别太把图神经网络当回事儿

    原因如下: 学术动机阻碍进步 愤世嫉俗者认为机器学习论文是通过以下方式炮制: 使用已有的算法; 添加层 / 超参数,用数学形式描述其重要性; 对超参数执行网格搜索,直到该新方法打败被模仿那个基线方法...这很难,因为你计算机内存是由 1 和 0 组成一维数组,并且图没有明显一维映射。 这种情况在我们更新图(添加 / 移除节点 / 边缘)时会变得更加困难。...这在设计就很慢,你可以使用 Ruby、C 或者汇编语言编写,但还是很慢,这是因为硬件内存读取速度就很慢。 这种布局主要优势在于其添加节点 O(1)。...此外,逐渐增加节点也很简单,只需要获取现有的嵌入,添加一个节点,然后在数据执行一个 epoch。 随机游走采样。...另一方面,我们不应该再专注于添加层,并在相同小型数据集上进行测试。没人在乎这个。

    53730

    【MySQL】面试官:如何添加数据库到MySQL主从复制环境?

    结果,最后问了一连串项目实战问题,其中一个问题就是:如何在不重新复制整个库情况下,添加数据库到MySQL主从复制环境?结果。。。...问题阐述 明确问题 面试官问题比较明确:如何在不重新复制整个库情况下,添加数据库到MySQL主从复制环境?...面试官问是 如何添加数据库到MySQL主从复制环境,注意:这里说是数据库,而不是MySQL实例。添加数据库和MySQL实例是两种完全不同方式,所以,一定要先理解面试官意思,再进行回答。...添加数据库 比如我们要增加一个数据库在master服务器,比如,名为newdb数据库。具体操作如下: (1)从服务,停掉slave数据库。...(3)修改主服务器my.cnf文件 主服务器,修改my.cnf文件,添加库到binlog-do-db参数,重启mysql。

    92020

    挑战NumPy100关,全部搞定你就NumPy大师了 | 附答案

    何在一个既有数组周围添加边框(用0填充) (★☆☆) ? 17. 下方表达式结果是什么?...如何在两个数组之间找到相同值? (★☆☆) 31. 如何忽略所有的numpy警告(真正干活时候不推荐这么干哈)?? (★☆☆) 32. 以下表达式为真吗?...设有考虑向量A [1,2,3,4,5],构建一个向量, 在A每个值之间插入3个连续零? (★★★) 71. 设有一个维度(5,5,3)数组, 如何与维度(5,5)数组相乘?...如何使用数组滑动窗口计算平均值?(★★★) 76....求一个矩阵秩 (★★★) 秩(RANK), 我们知道线性代数中矩阵, 有一种含义就是代表一个方程组, 矩阵秩就是这个方程组中那些原有的成员数量 83.

    4.9K30

    API 请求慢?这次锅真不在后端

    而且这种情况是偶,前端开发同学表示有时候会出现,非必。 但是后端同学通过一顿操作后发现,接口没有问题,他们是通过 postman 工具以及 test 环境尝试,都发现接口请求速度是没有问题。...复制问题步骤: 访问http://ssebin.btubbs.com/multi/ 单击添加计数器6或更多次 尝试打开另一个标签到同一地址 结果是,第 6 次之后,SSE 请求一直无法响应,打开标签到同一个地址时候...而在开发环境中,我们使用是 HTTP 1.1 就会出现这个问题。 那如何在开发环境中使用 HTTP / 2 呢?...只需要加上这一代码即可。 devServer: { + server: 'spdy', port: PORT, } 看看效果,是成功了。...提升相关技能知识储备以及思考问题方式,可能会方便我们定位到此类问题。 充分利用好浏览器调试工具,对一个问题可以从多个角度出发进行思考。比如一开始,没想到本地也可以开启 HTTP / 2。

    87410

    AI开发者大会中公开课摘要解读——如何在DuerOS技能中实现用户支付购买

    故事引擎在DuerOS技能开发中应用 本文主要解读一下谈老师分享"如何在DuerOS技能中实现用户支付购买"。...付费技能交互模型如下: ? 可以看到,付费技能是感知不到付费相关流程,从而降低了付费接入成本。 从开发者角度来看,付费技能不参与付费流程;从用户角度看,如何实现付费技能购买和使用呢? ?...然后,展示了演示技能——百度侠客。 对于技能内付费而言, 商业模式与appstore应用内购买类似。 ? 目前DuerOS平台支持两种技能内付费指令: ?...Buy指令非常精简,只需要传DuerOS商品id和技能自定义token。 ? 在用户扫码付款后,屏幕上自动切换到结果页了,这是如何实现呢? ?...在满足了提规则后,可以申请提,目前到账是月结。 ? 至此,可以回顾一下在DuerOS技能中实现用户支付购买三个步骤。 ?

    87210

    2022 最新 Spring Boot 面试题 (一)

    如果必须启动一个 Spring 项目, 我们必须添 加构建路径或添加 Maven 依赖关系, 配置应用程序服务器, 添加 spring 配置。...从 技术角度来讲 , 只使用 JavaConfig 配置类来配置容器是可行, 但实际很多人认为 将 JavaConfig 与 XML 混合匹配是理想。 3、 类型安全和重构友好。...YAML 是一种人类可读数据序列化语言。 它通常用于配置文件。 与属性文件相比 , 果我们想要在配置文件中添加复杂属性 ,YAML 文件就更加 结构化, 而且更少混淆。...Swagger 是用于生成 RESTful Web 服务可视化表示工具 ,规 范和完整框架实 。它使文档能够以与服务器相同速度更新 。...Spring Boot 提供监视器端点以监控各个微服务度量 。这 些端点对于获取有关应 用程序信息( 它们是否已启动) 以及它们组件( 如数据库等) 是否正常运 很有帮助。

    17610

    要跳槽你在备战金九银十了嘛,整理数道Java面试助你拿下offer

    Synchronized 是 由 JVM 实 一 种 实 互 斥 同 步 一 种 方 式 , 果 你 查 看 被 Synchronized 修 饰 过 程 序 块 编 译 后 ...非 公 平 主 要 表 在 获 取 锁 , 并 非 是 按 照 申 请 锁 时 间 前 后 给 等 待 线 程 分 配 锁 , 每 当 锁 被 释 放 后 , 任 何 一 个...先 进 操 作 , 果 没 有 其 他 线 程 征 用 数 据 , 那 操 作 就 成 功 了 ; 果 共 享 数 据 有 征 用 , 产 生 了 冲 突 , 那 就 再 进 其 他 ...如果必 须启动一个 Spring 项目,我们必须添加构建路径或添加 Maven 依赖关系,配置应用程 序服务器,添加 spring 配置。...因此,开始一个 spring 项目需要很多努力,因为我们 在必须从头开始做所有事情。 Spring Boot 是解决这个问题方法。

    83860

    API 请求慢?这次锅真不在后端

    而且这种情况是偶,前端开发同学表示有时候会出现,非必。但是后端同学通过一顿操作后发现,接口没有问题,他们是通过 postman 工具以及 test 环境尝试,都发现接口请求速度是没有问题。...复制问题步骤:访问ssebin.btubbs.com/multi/单击添加计数器6或更多次尝试打开另一个标签到同一地址结果是,第 6 次之后,SSE 请求一直无法响应,打开标签到同一个地址时候,...而在开发环境中,我们使用是 HTTP 1.1 就会出现这个问题。那如何在开发环境中使用 HTTP / 2 呢?...只需要加上这一代码即可。devServer: {+ server: 'spdy', port: PORT,}复制代码看看效果,是成功了。...提升相关技能知识储备以及思考问题方式,可能会方便我们定位到此类问题。充分利用好浏览器调试工具,对一个问题可以从多个角度出发进行思考。比如一开始,没想到本地也可以开启 HTTP / 2。

    98750

    CSS

    padding:用于控制内容与边框距离。   margin:用于控制元素与元素之间距离,margin最基本用途就是控制元素周围空间间隔,从视觉角度上达到相互隔开目的。   ...无论多么复杂布局,其基本出发点均是:“如何在显示多个div元素”。浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。    ...div4发上一个元素div3是标准流中元素,因此div4顶部和div3底部对齐,并且总是成立,因为从图中可以看出,div3移后,div4也跟着上移,div4总是保证自己顶部和上一个元素div3...div4发上一个元素div3是标准流中元素,因此div4顶部和div3底部对齐,并且总是成立,因为从图中可以看出,div3移后,div4也跟着上移,div4总是保证自己顶部和上一个元素div3...这时候就要用到清除浮动(clear),如果单纯根据官方定义,读者可能会尝试这样写:在div1CSS样式中添加clear:right;,理解为不允许div1右边有浮动元素,由于div2是浮动元素,因此会自动下移一来满足规则

    2K30

    如何避免灾难 云端七大误不看定失误

    随着企业在利用云计算带来好处同时,他们也成为了常见失误牺牲品。 第一失误:未能实现角度访问控制 转向云公司往往没有意识到他们数据是多么脆弱。...一些公司陷入了陷阱,但是:加密和保护自己数据是你自己责任。确保符合HIPAA、PCI DSS和其他标准等规定,保护您数据不被黑客攻击或不受员工监管失误损失。遵守法规也将节省成本。...第三失误:忽视网络连接性 为了确保云数据安全,有一个可靠互联网连接是至关重要,尤其是当你所有的数据都驻留在云时。不要以牺牲性能为代价,避免选择低价而没有高带宽网络连接存储选项。...最优定价结构适用于一个经常经历这种起伏根据需要动态定价,或实行付制、以实用为基础模型公司。...创建、维护和定期计划备份过程,适当灾难恢复计划可以帮助您确保数据保护和安全。预警演练可以为你增添信心,让你知道如何在正确地方找到正确数据,并在发生灾难时,你将能够及时获取这些数据。

    64890

    测开分享会第八期-测试开发之毒鸡汤共享(下)

    如何通过面试找到自己理想工作?如何在工作中提升自己?请干了这碗“毒鸡汤”,保证你神清气又爽!...实际开发和测试这两块相当于两个不太相同领域吧,但是也不是说不能转,主要是转变下思路。开发思路就是说我怎么代码来实现这个东西,而测试角度是我怎么从用户角度来是解决这个问题。...宋锋: 刚刚说过,面试过程中要主导面试,防止面试官问到不会问题!如果真问到了,就向相似的经验和项目引导 小飞侠: 要是被问到完全不懂,可以说没接触过么?...跑过去,2个开发问问题,偏向管理。,你怎么保证你团队成员案例覆盖率?我都不怎么会应答 宋锋: 其实现在已经不怎么强调测试覆盖率了,没有什么用,要以业务目的为主,辅助恰当测试方案。...还是要多跟大佬们学习新技术才锋: 带来正能量是第一步,要带来好工作机会,丰厚薪资待遇才对嘛! 提升测试技术不难,关键是要有方向!

    40720

    CAD2007操作教程

    , 相对极坐标:是指该点与一输入点之间距离,该连线与X轴正向之间角度数为极角度数,相对符号为@,....注:比例大小要适当,过大过小都会使填充不。 在此选项卡中 普通M:只填充奇数 外部O:只填充图形外部 忽略G:所有的都填率 在渐变色选项卡中,我们可以选择颜色之间渐变进行填充。...从“修改”菜单中选择“偏移”/快捷键为O/单击修改工具栏偏移按纽 。 2. 指定偏移距离,可以输入值 3. 选择要偏移对象 4. 指定要放置对象一侧一点 5....(偏移) 在行偏称和列偏移中输入行间距,列间距,添加+或减号-确定方向 单击“拾取行列偏移”按纽,使用它设备指定阵列中某个单元相对角点,此单元决定和列水平和垂直间距 单击“拾取偏移或...“拾取列偏移”按纽,使用定点设备指定水平和垂直间距 要修改阵列旋转角度,请在“阵列角度”旁边输入角度 4、选择确定 创建环形阵列步骤 1.

    3.6K30

    腾讯云官网-解决方案视觉升级项目总结

    ·用户 从用户角度去分析,在浏览页面时,最渴望了解问题就是“能不能对我有价值、能不能解决自己问题”,设计侧需从内容考虑页面必须包含有用户最想了解内容,需满足用户心里诉求,给用户带来有价值产品...·模块缺少规范化与统一性,字体、高、间距…细节缺少一致性,没有统一对齐原则。...网应用场景模块图片占比较大,图片色彩较暗,视觉版式陈旧,同时移动端下图片缺少响应式变化,针对目前问题进行了优化,同时按照4px栅格统一了字号高 针对其他应用场景图也做了修改,网中场景图在右侧固定高度...除了平台通用“旗舰服务”与“专家护航”服务以外,具有更专属服务业务也可以添加自定义服务能力。...目前网VIP客户服务模块视觉样式较多,需要统一收拢,并收集了网所有的服务类型,新增了icon绘制,也方便之后配置时选用,提高效率 页面结构规范化 重新定义了页面结构规范,统一了字号、字色

    5.8K20

    新年福利 | MOUSE Q 非你莫“鼠”

    你最潮鼠年新春礼 到!货!啦! 2020年1月3日起 MOUSE Q金鼠鹅系列盲盒 ! 货! 开! 售!啦! 点开视频,萌燃预警!...相同包装内,你可能抽到任意一款MOUSE Q(还有稀有的隐藏款哦),惊喜百分百! (左右随手滑动,更多惊喜 ?)...MOUSE Q,让你一年能量up!up! 说了那么多 最激动人心来了! 如何拥有MOUSE Q系列盲盒?...恋惠优品、魔力风暴、19八3 IP小站、趣智屋、朴坊、畹町 启路生活馆、ABS生活馆 TP生活馆、殊物生活馆、泡泡吧 重磅福利 在文末留言区「为身边一个人送上鼠年祝福」(“祝我好朋友Dov多福:...官网再设计 运营专题高效设计法(下) 运营专题高效设计法() 腾讯原创作品区块链版权存证发布 如何在页面极速渲染3D模型 ---- 感谢阅读,以上内容均由腾讯ISUX团队原创设计,以及腾讯ISUX

    1.8K20

    谷歌提出:对比学习在图像领域视觉表征中为何有效?

    除开算法角度,这篇文章从数据角度入手,为理解对比学习成功提供些启示。...作者接下来通过实验,在四个数据集ImageNet,iNat21,Places365和GLC20,使用SimCLR框架,对每个问题对探究,我也依次梳理实验结论。 1....数据量 重点关注蓝线和红线,可以看到在三个数据集表现十分接近,得到三点发: 超过 50 万张预训练图像几乎没有任何好处。 当有监督无法使用时,自监督预训练可以是一个很好初始化器。...数据域 1.并非所有的预训练数据集都能起到同等作用 作者通过交叉方式观察不同数据域影响,可以看到同一数据域效果最好,即对角线上值。...(2) 添加其他域预训练图像并不能使对比学习生成更一般表示。 (3) 损坏预图像对于有监督和自监督模型有不同影响。 (4) 对比学习在细粒度视觉分类任务表现远不如监督学习。

    89520

    什么是网络割接?

    网络工程行业,业务种类是非常繁多,单从技术(不区分售前和售后)角度看,常见业务就有: 售前测试 售前解决方案咨询 网络解决方案可行性分析 新项目实施(建网等) 网络改造或扩容、网络维护 故障处理...假设我们有这么一个客户,客户有个园区刚刚建成,园区内包括建筑物若干,地理覆盖面也较广。...那么这个网络运 一段时间后,网络可能会时常出问题,例如接入交换机如果上联链路出现故障,那么整台接入交换机上所连接用户都无法上网了。...,例如半夜~ 6)如果必要的话,还可选个时间在网中做小范围测试 所以,对于网络割接我们可以看出下面几个特点: 1)这玩意儿需要细心,细心,再细心 2)技术角度,各种问题需要考虑清楚,例如如果是路由复杂环境...五、割接方案需注意什么 方案只是割接思想一个交付物,有的时候是给客户看有的时候是给领导看

    91551
    领券