Angular 2 使用 FormBuilder 访问嵌套 FormArray

2023-11-21

首先,我刚刚从 Angular 2 开始,我正在尝试构建一个嵌套表单并验证它。

这是我的 ts 文件的一部分:

ngOnInit() {
  this.myForm = this.formBuilder.group({
    projects: this.formBuilder.array([
      this.initProjects()
    ])
  });
}

initProjects(): any {
  return this.formBuilder.group({
    name: ['', [Validators.required, Validators.minLength(3)]],
    some_array: this.formBuilder.array([
      this.formBuilder.group({
        name: ['', Validators.required],
        attr: ['', Validators.required],
        some_id: [1, Validators.required]
      })
    ])
  });
}

addProject(): void {
  const control = < FormArray > this.myForm.controls['projects'];
  control.push(this.initProjects());
}

View:

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">
  <div formArrayName="projects">
    <div *ngFor="let project of myForm.controls.projects.controls; let i = index">
      <div [formGroupName]="i">
        <md-input placeholder="Name" formControlName="name"></md-input>
      </div>
      <div *ngFor="let some_obj of project.controls.some_array.controls; let x = index">
        <div [formGroupName]="x">
          <div>
            <md-input placeholder="Nome" formControlName="controls.some_array.controls.name"></md-input>
            <small *ngIf="!some_obj.controls.name.valid">
                    Nome é requerido
                  </small>
          </div>
          <md-input type="number" placeholder="Cost" formControlName="controls.some_array.controls.attr" required></md-input>
        </div>
      </div>
    </div>
  </div>
  <button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button>
</form>
<pre>form value: <br>{{myForm.value | json}}</pre>

表单值的输出:

form value: 
{
  "projects": [
    {
      "name": "",
      "some_array": [
        {
          "name": "",
          "attr": "",
          "some_id": 1
        }
      ]
    },
    {
      "name": "",
      "some_array": [
        {
          "name": "",
          "attr": "",
          "some_id": 1
        }
      ]
    }
  ]
}

好吧,正如您所看到的,我有一些称为项目的数组,每个数组内有 1 个数组。

所以问题是我无法验证 some_array 数组的每个控件。

实际上我收到以下错误:

原始异常:无法找到路径为:'projects -> 0 ->controls.some_array.controls.name 的控件 PS:我已经尝试将其放在div中,如下所示:

但我也遇到了一个错误:

无法找到路径控制:'projects -> some_array' 提前致谢。任何帮助,将不胜感激。


尝试以下 HTML:

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">
    <div formArrayName="projects">
        <div [formGroupName]="i" *ngFor="let project of myForm.controls.projects.controls; let i = index">
            <md-input placeholder="Name" formControlName="name"></md-input>
            <div formArrayName="some_array">
                <div [formGroupName]="x" *ngFor="let some_obj of project.controls.some_array.controls; let x = index">
                    <div>
                        <md-input placeholder="Nome" formControlName="name"></md-input>
                        <small *ngIf="!some_obj.controls.name.valid">Nome é requerido</small>
                    </div>
                    <md-input type="number" placeholder="Cost" formControlName="attr" required></md-input>
                </div>
            </div>
        </div>
    </div>
    <button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button>
</form>
<pre>form value: <br>{{myForm.value | json}}</pre>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 使用 FormBuilder 访问嵌套 FormArray 的相关文章

随机推荐

  • 如何在我的属性中设置动态值

    我想将动态变量作为参数传递给我的属性 这里我想使用Environment MachineName 见下面的代码 public interface IMonitoringViewModelConfiguration IConfiguratio
  • Java Spring @Transactional 方法未按预期回滚

    下面是我正在尝试做的事情的快速概述 我想通过一个方法调用将记录推送到数据库中的两个不同表 如果有任何事情失败 我希望一切都回滚 因此 如果insertIntoB失败了 我想要任何可以承诺的事情insertIntoA被回滚 public cl
  • 如何使用 tfs api 列出团队项目的文件?

    我想知道是否有办法列出 tfs 团队项目中包含的所有 文件 我的目标是搜索由于分支而在 TFS 中没有固定路径的特定名称的文件 MyTeamProject Main Build instruction xml 和 MyTeamProject
  • 为什么我的断点在 Visual Studio 中重复?

    我最近开始在 Visual Studio 2010 中遇到断点问题 当我设置断点然后开始调试时 另一个断点出现在附近的其他行上 下面的屏幕截图显示了设置断点后的编辑器以及断点窗口 一旦我开始调试 断点就会重复 如以下屏幕截图所示 为什么会发
  • CodeIgniter 站点在子目录中,htaccess 文件可能会干扰主目录中的 htaccess 文件?

    在我的 CodeIgniter 网站 托管在 GoDaddy 上 中 导航到任何页面但索引都会出现此错误 未指定输入文件 谷歌搜索了一下 似乎原因一定与我的 htaccess 情况有关 设置的方式 也许最终会改变 是我的 CI 站点位于主域
  • NuGet 包未将 XMLDoc 文件与 dll 一起复制到 bin

    我正在使用 NuGet GUI 并尝试将 XML 文件与我的 DLL 一起包含以将帮助与 DLL 一起分发 当我在任何项目中安装包时 它都会成功添加 DLL 引用 但在添加包的项目的 bin 文件夹内未生成 XML 文件 XML 文件在pa
  • 如何计算 Ruby 数组中的重复元素

    我有一个排序数组 FATAL
  • Visual Studio 2005.RC 文件包括

    我正在 Visual Studio 2005 上使用 C 进行编程 我的问题涉及 rc 文件 您可以手动将包含指令 如 include blah h 放置在 rc 文件的顶部 但这是个坏消息 因为第一次有人在资源编辑器中打开 rc 文件时
  • 什么是 Android MultiDex?

    有很多关于 MultiDex 的帖子 我有时经历过解决错误 包括multiDexEnabled true in the defaultConfig我的 build gradle 部分 但是 这个功能到底是什么 使用场景有哪些 Quoting
  • Git 追踪上游

    我正在开发一个项目 并且有一个中央 git 存储库 该项目是一个框架 是许多分叉的基线 是否可以为分叉配置我的本地工作存储库 以跟踪项目的中心作为原点 并将骨架的主控作为名为上游的单独分支跟踪 跟踪骨架的主控以挑选对骨架的更改 我想我希望我
  • JavaScript“this”关键字和箭头函数

    Here this箭头函数中的关键字指向obj的可变环境 var greeting hi const obj greeting hey fo const greeting hola const arrowFo gt console log
  • 如何在数据框中添加一列来说明每行来自哪个工作表名称? Python

    我正在使用一个有五张纸的数据框 我想使用其中的四张 所以我可以将其加载到 df pd read excel xls sheet name a b c d 但现在我想添加一列来说明每行所在的工作表 但我不知道如何执行此操作 我尝试过这样的事情
  • Google-api-php 刷新令牌返回 invalid_grant

    我几乎搜索了谷歌第一页的所有结果 但似乎找不到答案 我正在使用 Google API 的刷新令牌并接收 Error refreshing the OAuth2 token message error invalid grant 我在做什么
  • 日期格式转换javascript

    我正在尝试使用 javascript 将 2013 年 7 月 24 日 转换为 DD MM YYYY 但我不断收到错误消息 我在用new Date July 24 2013 format DD MM YYYY 我缺少什么 Date对象没有
  • Python3.4 错误 - 无法启用可执行堆栈,因为共享对象需要:无效参数

    我一直在尝试安装OpenCV在 Windows 上的 Bash Linux 的 Windows 子系统 wsl 环境中 事实证明这非常困难 我想我已经非常接近了 但是进入 python 后 import cv2给出以下错误 ImportEr
  • 在文档 (.docx) 的特定位置添加图像?

    我使用 Python docx 生成 Microsoft Word 文档 用户希望当他写下这样的内容时 大家早上好 这是我的 profile img s 你喜欢吗 在 HTML 字段中 我创建一个 Word 文档 并从数据库中恢复用户的图片
  • 按值对数组进行排序并存储在变量中

    array array 5 4 6 8 5 3 4 6 1 我想排序 array like asort确实如此 但问题是asort是一个函数 它的乘积不能存储在变量中 我怎样才能做这样的事情 array array 5 4 6 8 5 3
  • 如何在 TextView 中的每个单词上使用 onTouchListeners?

    我想将 onTouchListeners 分配给 TextView 中的每个单词 不是链接到互联网上的某些内容 而是为了继续应用程序内的游戏逻辑 此时我的游戏的一般操作是查看 TextView 触摸一个单词 如果它是您获胜的目标单词 否则根
  • 如何从类函数内部访问对象属性[重复]

    这个问题在这里已经有答案了 我的 Javascript 类之一有时需要用 Json 更新 我一直在做一个函数 在给定一个 id 的情况下更新数据数组 但现在我想把它做得更封装 函数更新 在类内部 我做了什么 function File da
  • Angular 2 使用 FormBuilder 访问嵌套 FormArray

    首先 我刚刚从 Angular 2 开始 我正在尝试构建一个嵌套表单并验证它 这是我的 ts 文件的一部分 ngOnInit this myForm this formBuilder group projects this formBuil