Angular5：为什么当用户开始编辑输入时嵌套的 FormArray FormControl 会禁用？

Question

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

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

tldr;

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

StackBlitz 编辑：Editor StackBlitz for Angular FormArray Table

App StackBlitz：App Stackblitz for Angular FormArray table

---

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

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

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

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

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

Answer 1

调试后，我已经解决了我的问题。对于遇到类似用例的任何人，我的解决方案涉及我如何在切换 FormControl 的值时设置活动状态。

之前我是通过 Angular 的 getter 函数来切换活动值：

[FormControl].value.[ActiveFormField] = !active_state

没有更新表单的正确值。

相反，我需要这样设置值：

[FormControl].value.[ActiveFormField].setValue(!active_state).

通过设置该值，表单随后被正确更新，并且我的切换状态按预期执行。

---

我还清理了我引用的嵌套for-loops；但是，我仍然需要处理全选和取消全选。