首页
学习
活动
专区
工具
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.3K40

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

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

    1.9K20

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

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

    62130

    【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.4K10

    何在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的内容,感兴趣的朋友可以实践起来!

    37010

    何在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
    领券