问题标签 [formarray]

我正在尝试以 Angular 5 反应形式捕获 FormArray 控件的 valueChanges 事件。我有正常的表单组 valueChanges 事件并且工作正常，但不适用于 formArray 控件。

我已将我的表单组定义为 -

并按如下方式初始化表单数组 -

当我从我的 api 获取数据时，我将控件设置为 -

我的html模板如下 -

然后在 ngOnInit 中，我试图捕获 valueChanges 事件 -

但它永远不会被触发。我也尝试将 valueChanges 代码片段放在我的 formArray 初始化中，但没有运气，

更新：

我正在使用 a来自定义MatDataTable显示FormArray内容，DataSource问题似乎出在DataSource.connect()函数上。我正在合并 2 个 observables 以根据分页器页面配置对数据进行切片，如下所示：

我在我的应用程序的其他地方成功地使用了相同的方法，但在这里它不起作用。

我在 Stackblitz 中进行实验时发现如下。如果分页器页面大小设置为 5，则添加的前 5 个项目不会出现在FormArray值中，但是，第 6 个会出现。在此处查看并注意控制台调试日志。另外，请注意当您更改任何添加超过 5 个项目的分页器控件时会发生什么：

https://stackblitz.com/edit/angular-tdrjqy

原始问题：

FormArray数组中带有 a 的FormGroupa怎么可能controls没有值？我在我的应用程序的 2 个部分中设置了相同的设置，但由于某种原因，在一个部分中，该值是一个空数组......我已经花了几个小时在这上面，但我无法复制它，修复它或找到任何解释这里发生的事情的文档！

这是控制台日志的屏幕截图FormArray：

formControl我有一个包含可编辑（将是对象）和只读数据（将是 HTML 上的静态文本）组合的数组。有没有办法在 Angular 中做到这一点？我也可以使用FormArrays和FormGroups添加这个静态文本，但感觉不对。让我用一个例子来详细说明这个问题：

说，我有一个 JSON 对象，如下所示：

我使用 FormArrays 作为quantity项目的字段。

但是，标题不是可编辑的项目。向 a 中添加额外数据的最佳方法是FormGroup什么？

否则，我必须创建另一个单独的数组items来管理这些额外的和不可编辑的数据。因此，我可以将 item 的字段拆分为两个单独的对象。1) staticDataForItems、2) editableDataForItems。

这是我不喜欢的解决方案。因为，在我的用例中，我可以将项目添加到数组或从数组中删除“项目”。我不想处理formArray不是面向未来的 2 个数组（items 和 ）。

如果我有只读（只读 HTML 元素）和可编辑数据（输入 HTML 元素）数据的组合，我如何将这两个数组组合成 1 个单个数组。

我既想从表单验证中受益，又想以一种好的方式添加额外的数据。

您可以在下面找到一个工作示例：

https://stackblitz.com/edit/angular-gw1c6d?file=app%2Fapp.component.ts

谢谢。

无法将值修补到 FormArray resultList。

任何人都可以请解释我，我错过了什么？

TS 文件：

模型：

HTML：

这个.studList JSON：

我有一个角度为 4 的表单，其中包含名字 + 姓氏和一个包含 2 个下拉列表（选择）的表单数组，用作级联下拉列表和一个删除按钮。表单的其余部分还包含一个发送按钮和一个添加选项按钮。我在这里添加了一个屏幕截图，以便您更好地理解。表单添加、删除按钮和发送按钮有效存在 1 个问题，级联下拉菜单仅在有 1 个级联下拉菜单时才有效，当我添加额外的级联时，从前几组级联选择第二个选择中选择值搞砸了。我在这里添加了图片以获得更好的解释

正如您在第二张和第三张图片中看到的那样，cascadingdropdown 正在工作当我在标准中更改选择时，我在第二张下拉列表中选择了正确的选项

在第 4 张图片第 5 张图片和第 6 张图片上，您可以看到添加选项按钮有效，但是当我在选项 2 第一个下拉列表中选择一个标准时，它与选项 1 2nd Dropwown 混淆了，现在它也包含来自第二个选项的下拉选项

这是我的html代码

这是我的组件文件

我正在尝试创建（我认为的）是当前项目的基本调度程序组件。

编辑：我找到了自己的解决方案，下面提供了答案。解决选择所有功能的任何帮助的奖励，我暂时搁置了:)

tldr;

问题：为什么如果我传入一个禁用的行，启用它并开始编辑，该行会被禁用？如果我启用所有行 OnInit，一切都会按预期工作。

编辑器 StackBlitz：Angular FormArray 表的编辑器 StackBlitz

App StackBlitz：用于 Angular FormArray 表的 App Stackblitz

目标是允许用户选择和/或取消选择表单中的特定日期或时间范围。如果选择了该列或行，则其元素将切换其“活动”状态。

所以，我切换了周日栏和晨间行。只有与星期日和早上时间范围有关的值才会有效。

我正在使用 *ngIf 或 hidden 向用户隐藏元素，因此他们无法编辑。如果表单输入处于活动状态，那么他们可以查看它并编辑该字段。

但是，当我使用不活动的行初始化表单时，问题就出现了。因此，我让 Morning Row 处于活动状态 ngOnInit，然后用户可以在状态初始化后切换行。

当这些禁用的行被启用并且用户开始编辑时，该行的活动状态禁用。这就是我感到困惑的地方。我在杂草中，我似乎无法找到问题所在。

我无法推送到数组。我有一个可以有一个或几个人（角色，信息）的段（id，时间）。该字段是动态生成的。在加载页面显示字段（见下图）。 尝试添加人员时出现错误： 这是 .ts 代码：

ERROR TypeError: Cannot read property 'push' of null

}

.html 代码

我无法推送到数组。我有一个可以有一个或几个人（角色，信息）的段（id，时间）。该字段是动态生成的。在加载页面显示字段（见下图）。

尝试添加段时出现错误：ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'
这是 .ts 文件中的代码：

.html 代码

当我尝试添加时，它会添加段（id，时间）而不是人（角色，信息），不像加载时（下图），并抛出错误：ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3' 。为什么？

项目：this.subjectDesigneForm。数组([this.createItem()])

当我写这行错误累积属性'数组'不存在类型'FormGroup

嗨，我需要 Angular 4 代码来满足要求，例如将有 2 个文本框和添加按钮，一旦单击添加按钮，它应该将 2 个文本框数据推送到页面下方的条目列表中。就像将 2 个文本框控件添加到 formarray 中一样。