问题标签 [formarray]

在我的应用程序中，我使用 Reactive Forms 制作了一个表单。在我的应用程序中，它们是一个按钮Add new Fields，单击此按钮会添加新字段。

我可以添加新字段，但无法分配formControlName.

谁能告诉我正确的路径如何添加formControlName到这些动态添加的字段中。

这是Plnkr。

我ReactiveFroms在我的应用程序中使用。当我添加static控件时，一切正常。我validation使用. inbuilt_ 使用静态控件controls工作Plunkr 。

但是当我尝试添加dynamic控件时，我无法访问控件以应用inbuilt验证。

我在访问控制以应用验证时遇到reference问题HTML template。我无法弄清楚如何访问控件。这是plunkr。

这是我添加动态控件的模板：

我无法弄清楚如何访问formControl以添加验证。我尝试了各种方法，例如：

这是为此而生的。

我正在使用带有反应形式的 Angular 4。我有一个表单数组，我试图将它绑定到我在组件中跟踪的数组。我正在使用响应式表单，所以我可以进行验证，所以我不想使用模板表单方法。

我将项目添加到表单数组中，如下所示：

orderForm 显然是我的反应形式 FormGroup。订单是我从 API 获得的对象，我想更新它的值，包括行详细信息。我认为我应该在每个 newGroup 上使用“valueChanges.subscribe”，但我不确定如何获取已更改项目的索引。有什么想法吗？

这是这部分的 HTML：

有没有人有一个使用带有层次树结构的 FormArray 的工作示例？

本质上，我正在尝试为层次结构创建内联编辑

我可以让它工作到第一级，但我很难过如何让它递归地调用它的孩子

谢谢

首先，我只是从 Angular 2 开始，我正在尝试构建一个嵌套表单并对其进行验证，并将新的对象项目添加到对象 GroupProject 中。

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

看法：

表单值的输出：

表单值：

好吧，如您所见，我有一些称为 groupprojects 的数组，每个数组中有 1 个数组。

所以问题是我无法在对象 groupproject 中插入对象项目

实际上我收到以下错误：

错误类型错误：无法读取未定义的属性“控件”

我正在尝试为 aot build 编译我的代码，但我的 formArray 循环其控件时遇到了困难

我不确定如何将这些部分重写 controls.length为energyTips.controlsaot 兼容代码。

我有一个包含人员 FormArray 的表单。people 数组然后包含地址的 FormArray，它给了我以下 JSON：

现在我正在尝试从表单中获取这些“人”并创建一个 Person 对象数组

当我使用 console.log(form.get('people').value); 我得到以下结果：

但是无论我如何尝试获取数据，它都说我的列表是未定义的。例如，以下返回它无法读取未定义的“lastName”。

我的问题是，从 FormArray 中的数据创建人员对象数组的正确语法是什么？我知道这是我缺少的一些基本内容，但我已经习惯了 C# 并且对 Typescript/Angular2 很陌生。

几天来，我一直在尝试创建一个表单，该表单将允许用户创建产品，同时产品的变体可能与父产品具有不同的价格。例如，大部件是 10 英镑，小部件是 5 英镑。每次我最终得到的是 FormArray 中的一个 FormArray，换句话说，我有一个具有一系列变体的产品，这些变体有价格，但也有一系列属性。当我尝试添加控件时出现问题，我可以让变体价格显示得很好，但是我无法获得添加变体的路径。属性控件，我只是得到一个关于 ngFor only 工作的错误数组不是 [Object, Object] 或控件为空...我遇到的错误比我记得的要多！不管怎样，我的代码已经被重写了很多，

首先是我的 oninit 中的表单：

为主产品添加和删除属性的部分，效果很好：

我添加变体的部分有效，它仍然具有我用来尝试将添加到主要产品的属性复制到变体中的代码，我认为这有效，但无法访问中的值为了显示它们，variations.attributes 不适用于路径。

向变体添加属性的部分不起作用，这是我在 component.ts 中遇到问题的地方

最后，我的 html 更是一团糟，哈哈：

我正在处理具有嵌套 Formarray 的页面。

出于演示目的，我没有发布整个 ts 文件，因为有将近 600 行。但如果需要，我可以提供更多细节。这是html页面（也只是一个片段）

我已经尝试调试了几天了。该问题发生在构造函数执行之后和调用 ngOnInit 之前。仅当我添加多个客户并返回此页面时才会出现此错误。（添加客户不会导致任何问题，只有当我回到此页面时this.validator is not a function才会显示错误。

这很奇怪，因为错误发生在构造函数和ngOnInit之间，并且在ngOnInit中调用了populateData，这意味着在页面知道我将加载多少客户之前发生错误。但是，如果由于我添加了多个客户而仅发生错误，则似乎应用程序必须在构造函数中获取该信息，而我尚未在其中加载数据。

更新 1：美国东部标准时间 9 月 25 日下午 3:39 更新了 populateData 函数

更新 2：全栈错误：美国东部标准时间 9 月 25 日下午 4:09

更新 3 问题已关闭：感谢 @yurzui 的评论，我才意识到此页面的架构搞砸了。该组件有一个父组件，其模板中只有（当前组件选择器）。这两个组件在不同的文件夹下具有完全相同的名称。父级位于 /trial-budget，子级位于 /trial-budget/trial-budget-main。TrialBudgetComponent.toFromGroup 实际上是父级内部的一个函数。出于某种原因，它在 ngInit 而不是构造函数中被调用。仍然没有弄清楚为什么错误只发生在 2 个客户身上。但吸取的教训：1. 仔细阅读错误信息，尤其是第一行和最后几行。我没有看最后一行。2. 始终在构造函数中构造表单并在 ngOnInit() 中填充数据

页面最初是作为模板驱动的表单编写的，但正在转换为响应式以添加自动保存功能。

在页面组件的构造函数中，我定义了响应式表单变量：

“行”是与此问题相关的字段。

在 ngInit 中，通过 Web api 发出请求以检索持久的表单数据。数据以行数组的形式检索，每行包含 6 个单元格的数组。第三个单元格将绑定到 FormControl，其他单元格将呈现为静态文本。

在 html 中：

根据评论和答案，我已经澄清了我的意图和代码。[谢谢@amal 和@DeborahK] 我现在只将每行中的一个数据单元格绑定到 FormControl，每行中的其他单元格显示为：{{cell}}

因此，我需要渲染 this.rows 的内容（如 html 所示）以及 this.form.rows。

我目前在理解如何实现这一点时遇到两个问题。在打字稿中，留下循环的最后块迭代创建行的 FormControls 的数据行，数组 faRows 精确地包含我所期望的，一个 FormArray 的 FormControls，并且每个都检索到它的正确关联保存值。但是，当尝试从 this.rows 复制数据以创建 form.rows 的 FormControls 时，我无法让 setValue 或 setControl 正常工作。这可能与html页面上FormControl的命名有关，这是我的第二个问题。

我不清楚如何引用表单变量以在html中动态创建formControlName。这是我想象的，但它不起作用。