问题标签 [formarray]

我想在 Angular 5中使用FormArray 。

我已经创建了一个表单列表，FormArray我想用ngx-dnd重新组织它们。

这是我的代码：

如果用户在拖放后键入 textarea，则此代码可以正常工作。

如果用户只是拖放，则此代码不起作用，在这种情况下，我的表单数组“行”与拖放更改顺序之前相同。

我应该如何将 ng-dnd 与 FormArray 一起使用，我是否可以在我的组件中使用 ng-dnd 的回调方法在“drop”之后执行某些操作？

I am just a newbie to angular. I have create a event component where user enters the event name with packages. When user creates an event it has the functionality for creating multiple packages with add and remove row. For that I have used FormArray.

Everything is fine here. But when I am trying to get those values in event edit component I am getting the value of event name but when I am trying to get the packages details I am little bit confused in showing rows with filled values.

Here is the code what I have done so far

event-edit.component .ts looks like this

event-edit.component.html looks like this

我正在使用 ng-formly npm 工具创建动态表单。我希望此表单分为部分和选项卡，但仍然有一个提交按钮。即单个标签。现在我根据该库的文档。我创建了这个名为 TabType 的接口，它包含特定选项卡的差异字段。

现在使用下面的变量和模式，我可以使用上面的 TabType 接口生成分为不同部分的表单。

现在，在创建这个变量之后，我正在创建一个名为“form”的 FormArray，如下所示，

最后在 HTML 文件中，我有下面的代码，它通过选项卡解析以及称为“选项卡”数组的 TabType 并访问所需的表单字段以呈现它。

现在我想对表单元素再做一次迭代，并希望在选项卡中划分字段。在上面你可以看到它正在创建部分。

所以我看到的问题是，如果我们可以创建多维 FormArray，那么我们可以使用选项卡列表对其进行迭代，我们使用上面的部分列表完成。

有人可以建议我这样做的方法吗？

更新 ：

现在上面的 baseForm 有所有三个选项卡数据（虽然相同），你能帮忙把它作为数组传递，以便我可以迭代它，因为我认为我不能在 html 中迭代 formgroup 对象。

我正在尝试根据 FormArray 中的特定值计算总值或其他值。

我发现当订阅valueChanges并尝试将整个数组传递给类似reduce的东西时，父 FormGroup 上不存在“新值”。

StackBlitz 上的原始示例

样本：

如果arr有值[0, 1, 2, 3, 4]并且我将第一个值更改为1，我仍然得到10而不是11。

this.frm.get('arr').value显示所有初始值而不是更新值。

我对 Reactive Forms 还很陌生，所以我确定我只是在这里遗漏了一些基本的东西。

更新（有一个解决方案，但我仍然缺乏理解）：

我真的很想知道为什么我不能像 Eliseo 建议的那样订阅对整个数组的更改。

我也对为什么我使用的地方之间存在如此大的差异感兴趣.value- 如果反应式表单的全部要点是模型驱动然后传递frm.value给您的提交函数，那么为什么.value整个表单层次结构如此不一致？

更新 2

在 Eliseo 更新后的指导下更新了 StackBlitz 解决方案

我找到了一个我感觉很好的解决方案。它没有controls在任何地方使用，感觉非常干净。Eliseo 建议的方法促使我尝试这样做。我相信重要的是铸造 aFormArray并在其上执行任何push。这使该parent字段与您的其余部分保持联系FormGroup，FormArray因此它仍然包含在valueChanges事件中。

我现在相信 usingcontrols是 Angular Reactive Forms 的反模式，但我需要寻找关于该主题的更多指导。

我的 Angular 5 / Angular Material 应用程序中有这个 FormArray：

其实我不知道如何运行这个FormArray。我试过这个

我有一个名为“selsectedForm”的formGroup，包括嵌套数组，第一级是“字段”formArray，第二级是“值”formArray。

我看到了很多关于嵌套表单数组的示例并尝试使用它们，但每次都失败了。

我无法在这些嵌套数组中使用 setValue() 或 patchValue() 方法来更新 formGroup 值。

我需要这样做以查看表单是否被触摸和有效，并更新提交的值。

这是代码：https ://stackblitz.com/edit/angular-httakx?embed=1&file=app/app.component.ts

在运行时，我从 JSON 对象获取所有记录，并在表单控制中获取值。但是，在表单数组中，我只得到了许多记录中的第一个。

控制台中显示的错误：

在 FormArray._throwIfControlMissing 的索引 1 处找不到表单控件

JSON 对象和错误的图像：

1. 界面

2. 零件

3. HTML 代码

我有一个包含“字段”数组的反应式表单，在向数组添加新字段并打印或提交表单后，新字段不会添加到其中。我阅读了有关 patchValue 方法的信息，但它仍然无法正常工作。

实际上，我在 'fields' 数组中有第二级要处理，但我需要先解决第一级问题。

这是代码https://stackblitz.com/edit/angular-xzi9ga

我正在尝试使用 Angular ReactiveForms 生成动态表单。目前我收到错误Cannot find control with path 'myFormArray -> [index] -> myProperty。我已经检查了一些在互联网上找到的答案，但没有成功。这是我的代码：

HTML：

TS：

myData来自父组件作为组件的输入，它看起来像

更改中间索引的数据数组中的每个项目都会发生错误。

你能帮助我吗？谢谢

我想动态创建formControlName，这是我在组件中的代码，

控制器代码

所以我想要formControlName像这样，