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

如何在另一个FormArray中访问FormArray

在另一个FormArray中访问FormArray的方法是通过使用嵌套的索引来访问。以下是一个示例代码,展示了如何在另一个FormArray中访问FormArray:

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

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="outerFormArray">
        <div *ngFor="let innerFormArray of outerFormArray.controls; let i = index">
          <div [formGroupName]="i">
            <input formControlName="innerControl" placeholder="Inner Control">
          </div>
        </div>
      </div>
    </form>
  `,
})
export class ExampleComponent {
  myForm: FormGroup;

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

  constructor() {
    this.myForm = new FormGroup({
      outerFormArray: new FormArray([
        new FormGroup({
          innerControl: new FormControl('Value 1'),
        }),
        new FormGroup({
          innerControl: new FormControl('Value 2'),
        }),
      ]),
    });
  }
}

在上面的示例中,我们创建了一个名为myForm的FormGroup,并在其中创建了一个名为outerFormArray的FormArray。在模板中,我们使用formArrayName指令将outerFormArray绑定到外部div元素上。

然后,我们使用*ngFor指令遍历outerFormArray.controls,并使用formGroupName指令将每个内部FormArray绑定到内部div元素上。这样,我们就可以在内部div中访问内部FormArray中的控件。

在示例中,我们使用一个简单的input元素来展示内部控件的访问。你可以根据需要添加更多的控件或自定义模板。

请注意,这只是一个示例,你可以根据自己的需求进行修改和扩展。对于更复杂的场景,你可能需要使用更多的嵌套索引来访问更深层次的FormArray。

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

相关·内容

  • 如何在CVM实例中访问对象存储

    存储桶权限配置CDC中对象存储默认是私有读写权限,客户可以通过API的方式进行访问。但是客户如果要用对象文件的网络地址直接下载,则需要添加匿名访问权限,操作如下。...l 打开存储桶,进入 「Policy权限设置」 页面l 点击页面中 Policy权限设置 中的 添加策略 链接。l 根据要做的控制进行设置,如下截图是设置匿名访问的一个示例。...COS路径支持使用 配置参数 中的桶别名,或桶名称进行访问。如使用桶名称访问,需要额外携带 endpoint flag。...COS 路径支持使用 配置参数 中的桶别名,或桶名称进行访问。如使用桶名称访问,需要额外携带 endpoint flag。...host_bucket中 %(bucket)s. 这部分不变,后面也是CDC里对象存储的域名。

    3.4K40

    Spring 如何在一个事务中开启另一个事务?

    Spring 如何在一个事务中开启另一个事务?...; 调用其他系统; } } 这里就用伪代码来做示例了,当我们执行了“向数据库中添加数据”,我们去数据库中查询,发现并没有我们添加的数据,但是当我们的service这个方法执行完成之后...Spring中的事务注解 @transactional 提供了一个参数: Propagation propagation() default Propagation.REQUIRED; 这个参数是定义...; } } 执行之后,发现结果还是没有改变,必须要整体执行完成,数据库中数据才会出现,说明还是在一个事务中。...; } } 我们将要事务分离出来的方法写在另一个service中,再次测试,发现执行完插入语句之后,数据库中就已经能查到数据了,说明事务分离了,完成了我们的需求。

    77130

    前端|如何在SpringBoot中通过thymeleaf模板访问页面

    Thymeleaf的主要目标是在开发工作中带来优雅的自然模板。...在传统的web开发时通常使用的是jsp页面,首先需要在pom文件中引入springmvc相关的包,然后写springmvc的配置文件(包括访问资源的路径解析),之后还需再web.xml中配置访问路由。...在Springboot中为此提供了便捷的解决方案,需要在pom.xml中添加web开发的依赖。...这样就实现了通过thymeleaf模板访问html文件。 在浏览器输入:localhost://8080/success 就能看到刚刚success.html这个页面。...原型即页面是它的特色,所谓原型即页面,就是你写的html,静态的去访问是什么样,动态的去访问还是这样,只不过动态的时候会把数据填充进去。

    1.9K20

    【DB笔试面试511】如何在Oracle中写操作系统文件,如写日志?

    题目部分 如何在Oracle中写操作系统文件,如写日志? 答案部分 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。...image.png 其它常见问题如下表所示: 问题 答案 Oracle中哪个包可以获取环境变量的值? 可以通过DBMS_SYSTEM.GET_ENV来获取环境变量的当前生效值。...在CLIENT_INFO列中存放程序的客户端信息;MODULE列存放主程序名,如包的名称;ACTION列存放程序包中的过程名。该包不仅提供了设置这些列值的过程,还提供了返回这些列值的过程。...如何在存储过程中暂停指定时间? DBMS_LOCK包的SLEEP过程。例如:“DBMS_LOCK.SLEEP(5);”表示暂停5秒。 DBMS_OUTPUT提示缓冲区不够,怎么增加?...如何在Oracle中写操作系统文件,如写日志? 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。

    28.8K30

    移除 View Engine 转用 Ivy,盘点Angular 12的重要更新

    用于向 TyperScript 类中写入清晰代码的 Nullish 合并,现可以与 Angular 模板配合使用。...为了提高性能,新版本删除了 DomAdapter 中的多种未使用方法。 新版本向 localize-extract 中添加一种新的格式,名为 legacy-migrate。...在新版本中,您可以通过 BrowserAnimationsModulewithConfig 禁用动画。 向 FormArray 与 FormGroup 中引入 emitevent 选项。...向 routerLinkActiveOptions 中引入更多微调控件。 允许您自定义路由器出口实施方法。...在表单中,引入最小与最大值验证器。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件的组件的实际位置。

    4.5K10

    如何在SpringBoot应用中实现跨域访问资源和消息通信?

    浏览器支持在API容器中(如XMLHttpRequest或Fetch )使用CORS,以降低跨域HTTP请求所带来的风险。 本节将介绍如何在Spring Boot应用中,实现跨域访问资源。...在Spring Boot应用中允许跨域访问 在微服务的架构里面,由于每个服务都在其自身的源中运行,因此,很容易就会遇到来自多个来源的客户端Web应用程序来访问服务的问题(即跨域访问)。...发送消息的客户端将-一个消息发送 到指定的队列中,接收消息的客户端从这个队列中抽取消息。...RabbitListener (queues = " someQueue") public void processMessage (String content) { //... } } 本篇文章介绍如何在...SpringBoot应用中实现跨域访问资源和消息通信,喜欢的朋友可以转发此文关注小编!!

    1.6K10

    如何在Adspower指纹浏览器中配置IPXProxy,实现TikTok快速访问

    例如你无法直接访问到美区的tiktok,如果你想要畅享全球网络的话,指纹浏览器和代理IP可以帮助到你。那如何快速访问tiktok?...浏览器选择SunBrowser,这里注意操作系统可以选择iOS系统,能够模拟手机环境来更好的访问tiktok。3. ...然后将从IPXProxy获取的代理信息,手动填写到Adspower中。4. 检查代理成功显示成功连接后,点击最下方“确定”按钮。5. ...这两者的结合,不仅改变浏览器的指纹信息,如屏幕分辨率、字体、语言设置等,模拟出不同的虚拟环境,保护用户的隐私安全。...大家可以通过这种方式来快速访问全球tiktok的内容,感兴趣的朋友可以实践起来!

    81910

    如何在ORACLE CLOUD中创建和访问容器集群丨内附官方文档链接

    墨墨导读:本文描述如何在Oracle Cloud中创建并访问容器服务。为了简单,所有的操作都是针对root隔离区。 创建允许容器运行的政策官方文档链接 这一步是必须的,否则可以增加容器容器。...在容器集群中的Worker Node可以不用ssh登录(我们在后续只需要通过oci和kubectl命令来操作集群就可以),所以页面中的PUBLIC SSH KEY确实是不用输入的,而默认的Private...分为5个小步骤,不过官方文档中的描述很详尽。 ?...第一步:标准的生成访问密钥的过程 mkdir ~/.oci openssl genrsa -out ~/.oci/oci_api_key.pem 2048 chmod go-rwx ~/.oci/oci_api_key.pem...点击“Add Public Key”,直接将上一步生成的内容粘贴到输入框中,点“Add”。 ?

    1.2K20

    如何在CasaOS系统中通过Docker部署Alist+Aria2实现远程访问挂载网盘

    登录cpolar官网:https://www.cpolar.com 在cpolar的下载页面中,找到对应版本的cpolar安装程序,笔者使用的是Windows操作系统,因此选择Windows版下载。...注册完后,登录cpolar的客户端,(可以在浏览器中输入localhost:8088直接访问,也可以在开始菜单中点击cpolar客户端的快捷方式),点击客户端主界面左侧隧道管理——创建隧道按钮,进入本地隧道创建页面...superset数据隧道入口(公共互联网访问地址),则可以在状态——在线隧道列表中找到。 复制两个隧道的任意一个公网地址,粘贴到公网浏览器中。...粘贴公网地址到浏览器后,显示公网访问公司的内网superset登录界面,登录后实现公网访问内网。 3....superset,(两个地址复制哪一个都可以)可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了,在外面就可以通过外网地址访问superset大数据系统了,随时随地查看数据!

    63710

    如何在Java中判断一个字符串是否包含另一个字符串

    在Java中,可以使用contains()方法或matches()方法来判断一个字符串是否包含另一个字符串。...一、使用contains()方法 Java中的contains()方法用于检查原字符串(调用方法的字符串)是否包含特定的字符序列。如果原字符串包含指定的字符序列,则返回true,否则返回false。...三、综合应用 在实际开发中,可能会遇到比较复杂的情况,比如可能要查找的字符序列事先是未知的,或者需要检查多个字符序列等等。...                System.out.println("The string does not contain " + subStr);             }         }     } } 代码中的字符串数组包含了我们想要检查的所有字符序列

    1.3K20
    领券