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

我有一个formArray,在那个formArray里我只有formControls,没有formGroup,我怎么能在html控件中循环呢?

在html控件中循环formArray中的formControls,可以使用ngFor指令进行循环。ngFor指令用于循环遍历一个集合,并为集合中的每个元素生成相应的html元素。

在你的场景中,你可以使用以下代码来实现循环formArray中的formControls:

代码语言:txt
复制
<div [formGroup]="yourForm">
  <div formArrayName="yourFormArray">
    <div *ngFor="let control of yourForm.get('yourFormArray').controls; let i=index">
      <input [formControl]="control">
    </div>
  </div>
</div>

解释:

  • [formGroup] 指令用于绑定formGroup对象,它的值应为你的表单的formGroup名称。
  • formArrayName 指令用于绑定formArray对象,它的值应为你的formArray名称。
  • *ngFor 指令用于循环遍历formArray中的每个formControl,并为每个formControl生成一个input元素。
  • let control of yourForm.get('yourFormArray').controls 表示将formArray中的每个formControl赋值给变量control,并使用这个变量在循环中引用每个formControl。
  • let i=index 表示定义一个变量i,并将当前迭代的索引值赋给它。

请注意,你需要根据你的实际情况替换"yourForm"和"yourFormArray"为你的formGroup和formArray的名称。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云基础产品:https://cloud.tencent.com/product
  • 腾讯云云服务器CVM:https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储COS:https://cloud.tencent.com/product/cos
  • 腾讯云人工智能AI:https://cloud.tencent.com/product/ai
  • 腾讯云物联网套件:https://cloud.tencent.com/product/iot
  • 腾讯云移动开发套件:https://cloud.tencent.com/product/mfc
  • 腾讯云区块链服务:https://cloud.tencent.com/product/bcs
  • 腾讯云游戏多媒体处理:https://cloud.tencent.com/product/pgm
  • 腾讯云音视频处理:https://cloud.tencent.com/product/mps
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular8稳定版修改概述

这允许现代用户代理和旧用户代理的经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...简答:还没有。目前,它处于“选择预览”模式。 Bazel可作为选择加入,预计将包含@angular/cli第9版。...一个域中支持多个应用。 阅读Angular Doc上有关服务工作者的更多信息。 表单改进 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。...如果要触发一个表单组中所有控件的验证,这个方法将是非常有用的。...清除所有元素 以前要删除所有元素,formArray 我们必须循环删除第一个元素直到空: while(formArray.length){ formArray.removeAt(0); } 现在就不需要那样操作了

4.5K20

Angular 从入坑到挖坑 - 表单控件概览

,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过组件构造 FormGroup 实例来完成对于多个表单控件的统一管理 使用 FormGroup 时,同样组件定义一个属性用来承载控件组实例...,然后将控件的每一个控件作为属性值添加到实例 import { Component, OnInit } from '@angular/core'; // 引入 FormControl 和 FormGroup...类的方式来简化的完成表单的构建 FormBuilder 服务三个方法:control、group 和 array,用于组件类中分别生成 FormControl、FormGroupFormArray...模板驱动表单,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的值亦或者校验 一个最简单的例子...--#UserName 是局部变量,若是ngmodel,拿到的就是一个响应对象,若是非ngmodel绑定的,则是dom元素代码--> <!...; Submit()函数内,点击提交的时候对整个表单一一去判断,传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动...FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段的值!...---- 嵌套表单 有些时候我们接口数据层次不可能只有一层,出现两层三层都有可能; 这时候需要我们构建一个嵌套表单。。。

3.8K20

理论 | Angular 的响应式编程 -- 浅淡 Rx 的流式思维

给出的答案很简单:响应式编程可以让你把程序逻辑想的很清楚。为什么这么说?让我们先来看一个小例子,比如我们有这样一个需求,在生日的控件之前添加一个年龄的选择,用以辅助生日的输入。...,我们这里合并后都使用 天 作为单位: 合并之后,由于我们最终需要向生日那个输入框写入一个日期,而我们合并之后的流给出的是按天数计算的年龄,所以这里显然需要一个转换。...我们这里使用了响应式表单,也非常简单,就是一个 form 里面 3 个控件,这里采用了官方的 Material 控件,如果你觉得不爽,可以直接用基础的 HTML 控件搭配样式即可。...Angular 处理响应式表单只有 3 个步骤: 1、组件的 HTML 模版给要处理的控件加上 formControlName="blablabla" 2、form 标签添加 [formGroup...]="xxx" 指令,这个 xxx 就是你组件声明的 FormGroup 类型的成员变量:比如下面代码的 form: FormGroup; 3、组件的构造函数取得 FormBuilder 后(

5.2K10

(数据科学学习手札113)Python+Dash快速web应用开发——表单控件篇(下)

的Form()与FormGroup()被设计用于更快捷地排布我们的表单控件,使用逻辑是先用FormGroup()组织好每一个表单控件,再将若干个FormGroup()形成的列表作为Form()的children...,共包含了两个输入框和一个按钮共三个控件,通过将控件组织FormGroup()+Form()的结构,使得这些控件布局上自成一体非常方便。   ...相信你也注意到我们有些FormGroup()除了控件自身,还添置了一些额外的辅助性质的部件,常用的: dbc.Label()   利用dbc.Label()部件,我们可以在对应控件之前添加说明文字,...参数,只不过这里我们一个FormGroup()为指定表单控件添置valid参数相反的两种预设的FormFeedback()内容部件,接着只需要写个回调关联控件自身即可: app2.py import...最后,限于篇幅,此处并没有直接放出全部代码,你可以文章开头的Github仓库找到本期全部代码+附件。   以上就是本文的全部内容,欢迎评论区与我进行讨论,下一期的Dash教程下周见~

1.1K20

炫酷!纯Python开发LOL英雄信息查询平台

的Form()与FormGroup()被设计用于更快捷地排布我们的表单控件,使用逻辑是先用FormGroup()组织好每一个表单控件,再将若干个FormGroup()形成的列表作为Form()的children...,共包含了两个输入框和一个按钮共三个控件,通过将控件组织FormGroup()+Form()的结构,使得这些控件布局上自成一体非常方便。...相信你也注意到我们有些FormGroup()除了控件自身,还添置了一些额外的辅助性质的部件,常用的: 「dbc.Label()」 利用dbc.Label()部件,我们可以在对应控件之前添加说明文字,...参数,只不过这里我们一个FormGroup()为指定表单控件添置valid参数相反的两种预设的FormFeedback()内容部件,接着只需要写个回调关联控件自身即可: ❝app2.py ❞ import...最后,限于篇幅,此处并没有直接放出全部代码,你可以文章开头的Github仓库找到本期全部代码+附件。

1K20

Angular: 最佳实践

Note: 本文中,将尽量避免官方 Angular Style Guide 提及的模式和有用的实践,而是专注自己的经验得出的东西,将用例子来说明。...如果我们一个 Order 类型的变量,我们只能将这三个字符串一个分配给 status 字段,分配其他的类型 TS 编辑器都会跑出错误。...注意我们是怎么组件类上创建一个 statuses 字段,以便我们可以模版中使用这个枚举。但是假如我们多个组件中使用这个枚举?或者假如我们要在不同的组件使用其他枚举?我们需要不停创建这些字段?...如果我们更多的表单控件,那么它会使得视图更加混乱,并且创建了很多重复的逻辑。...读者可能意识到我并没有写关于 Directives 和 Pipes 的相关内容,那是因为想写篇详细的文章,关于 Angular DOM 是怎么工作的。

2.8K40

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

在生成的monkey-compiler项目中,一个目录叫src/,该目录用于存放项目的所有代码文件,开发过程,我们只要关注src目录的内容,打开其中的index.js,可见内容如下: import...在上面的代码我们导入了Component类被使用到,但导入的React组件却没有被使用到,你可以尝试把第一行的React给删除然后再加载页面,你就可以看到错误信息:’React’ must be...什么是JSXrender()函数,我们通过return返回了一堆类似HTML代码似的东西: <bootstrap.Panel header="Monkey Compiler" bsStyle="...上面那一坨看似<em>HTML</em>的代码其实是以<em>HTML</em>标签化形式来编写的javascript代码,首先要注意上面那坨代码<em>中</em>,<em>有</em>很多元素是<em>HTML</em>规范<em>中</em><em>没有</em>的。...我们看到,<em>在</em>render函数<em>中</em>,我们还定义了<em>一个</em>textAreaStyle的对象,不难看出,它实际上承担了原来CSS的作用,也就是说,<em>在</em>JSX<em>中</em>,我们可以统一用javascript语言来代替原来需要用<em>HTML</em>

4.6K20

由easyui的tabie下渲染失败,发现的一个有意义的问题

;后来想可能是受到别的地方什么脚本的影响,或者是源代码哪里出问题了,于是将一个运行正常的项目的相关前段代码拿过来全部替换,但是发现依然不行,之后又将有问题的项目中的加载tab控件的代码所在的文件放到正常的项目中运行...,发现也是正常的,这下就非常奇怪了,等于2个项目的前段代码一模一样,但是tab控件的渲染在其中一个项目就是不行,而且是该项目的所有使用了tab控件的地方都有问题。...这时项目组的同事突然说了一句:“好像也改了一下filter的东西,但是那个是后台的代码,怎么也不会影响到前台的easyui的脚本解析吧?”...,想了一下当时也觉得不会影响,但是实在没有别的思路了,就死马当活马医,试试看呗,于是将filter修改的代码注释掉,在运行代码,结果发现问题没有了,tab控件正常加载!...好奇怪啊,filter能有什么东西会导致easyui的tab控件仅仅在ie下加载失败

66630

Step By Step 一步一步写网站 —— 帧间压缩,表单控件

记得大学的时候,学习多媒体遇到了一个概念:帧内压缩和帧间压缩。感觉的第一篇里里面提到的那个方法一点像帧间压缩,那么是不是把代码减少到极致了?...单看一个表的添加代码好像是,但是一个项目可不是只有一个添加的页面就完事了,项目越大,添加的页面也就越多,每个页面都写这么多的代码,依然很烦。那么怎么? 许多人想到了代码生成器。...写代码生成器的人都知道MS SQL里面这几个表的作用,生成代码大多也都使用了这几个表,但是只限于生成代码,而没有去想其他的用处,是不是一点可惜?...我们可以把这个SQL语句做成一个视图(V_Col),下面的代码会用到。 了这个数据源我们可以做什么?好多人都用它来做代码生成器了,而我要用他做一个简单的表单控件!...3、字段不是都用TextBox搞定的,还需要下拉列表框、复选框、单选框、FreeTextbox等各种各样的控件只有一个TextBox哪行呀?! 4、要加验证怎么办?要加说明怎么办?

517100

.NET成人礼 | 还记得20年前一起拖过的控件吗?

经典旧世 2000 年那个时候,上海这样的城市里也不是每家每户都有电脑,我家也没有电脑。在学校经常听几位家里条件不错的同学说他们玩电脑的事情。...而我VB6上没拖多久控件,就不小心误入了 .NET 的世界,起因是小时候不懂,为了更新编程环境,不小心购买了一张 Visual Studio .NET 的盗版光盘,装完了发现,这个VB怎么和以前的不太一样啊...记得8年前,微软刚推出 ASP.NET MVC 3 框架不久,所在的公司就接到了一个 MVC 的新项目,由于整个部门200多人只有研究过MVC,公司就派去给客户做个POC。...有幸见证了.NET和Web的发展,也更有幸能在全面转战 .NET Core的外企工作,不仅没有996,偶尔还能拖控件维护VB.NET的老产品回忆童年。...过去10年太多战友被迫离开了曾经热爱的 .NET 家园。不知道现在的你们,过的如何?.NET对来说,不仅仅是一个编程平台,更是一种信仰,带着兴趣工作,从来都不累。

78920

自己动手写客户端UI库——事件机制(设计思路大放送)

在上一篇文章我们创建了一个Button控件,并把这个控件显示界面上, 在这一篇文章,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 Winform,我们对一个按钮绑定事件的方式如下...实在是无奈之举(也希望园友多提意见) 回答: 我们在给一个WUI按钮绑定事件的时候,这个按钮可能已经呈现在界面上了;也有可能还没有呈现在界面上; 如果还没有呈现在界面上,那也倒简单,只要在呈现的时候...但如果他已经呈现在界面上了,该怎么?...Action其实就是一个委托,如果对这个东西不了解的朋友,可以看看我之前写的一篇文章《30分钟Linq教程》泛型委托那个小节第二:我们把这个参数存入了一个私有的List容器,为什么这么做?...遗留问题:这里没有太关注事件的执行顺序,以后会改进 五:PanelMain的AddChild方法 第一: 假设一个控件没有渲染到界面上,那么是否允许开发人员对他绑定事件?当然是允许的!

1.4K90

《小白HTML5成长之路32》把自定义弹窗做成控件的第一步

“小白,今天上午布局的那个弹窗想法不错!” 小白说道:“只是用CSS布了一个局,还没有添加用户交互!”...小白虽然不怎么明白,还是建了一个名称为以小白首字母xb命名的文件夹,然后在里面放了两个空的CSS和JS文件。 建好以后小白问老朱:“下面该注意什么?” 老朱说:“小白!...“好了,现在你把所有关于弹窗的css样式都放到刚刚建的那个css文件里面,然后head里面引入这个css文件。” “放好了,然后?”...“你定义一个对象,让这个对象可以把你布局的那段html代码放到body里面。不用做的太复杂,简单点,一个记录html代码的变量和一个往body放html代码的方法就可以了。”...通过Layer调用alert方法就可以把之前的html布局放到body里面。” “恩,对!你现在把Layer对象放到之前创建的js文件里面,然后把那个js文件也引入到页面。”

1.4K100

分页控件的使用能不能再简单一点,能不能一个页面搞定所有的列表需求?

那么我们能不能“合并”一下?所有(或者大部分没有特殊情况的)列表都是用同一个aspx文件。      ...试想我们的项目不会只有这两个列表页面吧,少则十几个,多则上百个,每个列表页面都要写一遍给分页控件设置属性的代码,岂不是很烦。在我看来这也是一种冗余代码。是要去掉滴,或者要抽象出来。...当然可以使用代码生成器来完成,但这是治标不治本,没有解决根本性问题,带码还是那么多,只不过不用手动敲出来罢了。那么怎么?...但是目前分页控件没有这个功能。 怎么?自己写一个专门用来显示数据的控件吧,就叫做myGrid。...这个其实很好办,获得一个DataTable作为数据源,然后用循环的方式输出Table形式的html代码就OK了。 这样我们就可以把分页控件提供的数据源给显示出来了。

1.1K50

WPF初体验

Win32/MFC/WinForms只要了解了消息循环机制, 理解起来就比较容易, 可WPF冒似没这套东西. 而且, HWND已经不存在于控件上了, 这是一个令人很不习惯的地方....WPF显示Win32控件, 可以使用HwndHost, 而对于WinForms, 可以使用WindowsFormsHost....BuildWindowCore创建一个Win32子窗口, 并把这个窗口的HWND做为DX初始化的参数. 如果需要改变大小, 还需要实现OnRenderSizeChanged....这个问题, 也没找到一个完美的方式. 一种思路是WndProc, 这样的话, 只有在有WM消息触发时才会渲染, 就像UE3那个查看器一样, 鼠标不动, 它就不更新....最完美的方式就是找到WPF的主循环, 问题是WPF有这东西么? 有待研究. WPF的优势是什么? 控件多样性不如WinForms, 与C++的交互便利性不如MFC, 为什么还要使用它?

86830

仿uc下部弹出菜单

先说说怎么会无聊到这种地步去弄这个代码今年2月份的时候公司本来要做个这种弹出的菜单的,5个按钮每个都有一个菜单,记得网上有仿UC菜单的源码,就下下来看,结果不符合要求,当时这个菜单由另一个同事在做代码...反编译过UC的人就知道,UC没有这种图片,那他用的是什么图,UC用到下面的3张图片。 ? ? ?...当时就想这3张图怎么xml添加进去呢,百撕不得其姐啊,当时公司要弄个翻页时钟(仿墨迹的),那边用到了图片合成的方法,就想到这边也可以用这种方法,就是必须先把.9图拉伸下。...具体UC是怎么合成的图片,只有问UC去了,一种方法也可以合成,就不知道是不是和UC的原理一样了给你们参考下。 先说思路吧,看图 ?...前面图片写成其他部分填充白色,这是错误的,是以透明像素来填充的,误导大家了啊,见谅哈,已修改 上面的方法,技术可行性方面就不是问题了。

1.5K80

关于IB_DESIGNABLE IBInspectable的那些需要注意的事

可以很明显的看到,是initWithCoder这个方法陷入了死循环。由于这个死循环导致了程序Crashed了。 可是这里为什么会死循环?其实根本原因在于,我们自定义的类的class写成自己了。...现在在Xode 7,我们默认创建一个View,是不给我们默认生成一个XIB文件,ViewController会有下面那个选项,可以选择勾上。 ?...对比一下我们自定义tableViewCell的class就是本身,怎么没有这个问题。...由于现在我们自定义的class了接管整个view的绘制权利,那么我们就应该在initWithCoderloadNibName,把整个View初始化的时候load出来。...IB_DESIGNABLE / IBInspectable还是一些缺陷的。IB_DESIGNABLE暂时只能在UIView的子类中用,常用的UIButton加圆角这些暂时也没法预览。

1.5K30

geotrellis使用(三十五)Cesium加载geotrellis TMS瓦片

前言 做任何事情都不是想象的那么简单。好久没有更新技术博客了,跟最近瞎忙很大关系,虽说是瞎忙也抽空研究了些技术。 主要是前端渲染,像原生的WebGL和Cesium。...前期做了很多Geotrellis的工作,那么就想着能不能把Geotrellis发布的TMS加载到Cesium来,本来这是很简单的嘛,以前是leaft-let显示,现在就是换一个地方显示而已,并且...无论怎么刷新就是出不来那层瓦片,其他两层数据正常显示,打开浏览器的调试模式,能够看到对ndvi瓦片的请求返回的都是200 OK,也能在调试中看到单个瓦片应有的效果。...,只要是自己Geotrellis发布的TMS均无法显示,折腾到四点多,始终没有出来,stackoverflow和github上提了问,等了半天也无人回复,只好闷闷不乐的去睡了。...其实之前折腾到四点多的时候脑子就有这个意识,一定是发布的TMS缺少了某个东西(或者是某个东西与Cesium的要求不一致),导致Cesium无法正常显示的瓦片,所以一看到这个就亢奋了,程序员的直觉告诉这肯定就是要找的东西

2.2K100

【开源】的分页控件正式命名为QuickPager ASP.NET2.0分页控件

不过没有想把所有的数据库的所有可能的分页算法都写到数据库里,可以分页控件的外面继承PageSQL类来写一个子类,在这个子类里面实现需要的分页算法,然后把这个实例赋值给分页控件就ok了。...( 这就是的分页控件不采用存储过程的原因。)     2、索引。要想提高分页的效率,必须要设置好索引,包括非聚集索引在内。     索引介绍分页算法的文章,提到的几率并不多。...并不是说只有海量数据的情况下才需要索引,在数据量不多的情况下,有的是也是需要的。     ...最后给最后一个排序字段加了一个非聚集索引(好像还给一个字段加了一个非聚集索引),问题解决了,查看最后几页,两秒内就可以显示出来数据(局域网)。这样可与也基本可以接受了。...查了一下字典,page翻页的含义,而pager是BP机、网络寻呼机的意思,不知道为什么一个人的分页控件叫做 myPager。不管别人是怎么想的了,的这个不算重名吧。

93650

基类、接口的应用——表单控件:一次添加、修改一条记录,一次修改多条记录。(上)

本来也想写一个2007的总结的,但是看到很多人都写了,就不凑热闹了,写点和代码有关系的吧。 写作原因: 1、项目做得最多的操作恐怕就是保存数据了,总是要写一大堆的代码,能不能简单一点?...2005来了,似乎可以减少一些代码,但是03怎么? 2、基类、接口、策略模式,好多高手都讨论过了,但是都是理论上的,在实践如何应用webform 里面又怎么使用?...那么怎么才能让取值更简单一点想写一个方法(GetValue)来获取用户输入的数据,而且取值的时候不必关心是什么控件一个GetValue,就把值得到了,管它是什么控件!...如果用基类的话就要在控件的“共有”基类里面加一个方法,但是这个“共有”的基类也不是太好找,再有.net框架里加点东东好像也不是太容易(或者是学艺不精)。 想到的解决方法就是使用接口。...另外还可以做一个循环,把控件ID放到一个数组里面,然后循环一下就可以了。控件(字段)再多也不怕了,代码行数不会跟随字段的增加而增加。 3、开始保存数据(单条数据)。

1.1K50
领券