angular - 单个数据源的多个反应式表单组

Question

我的数据源如下所示：

data = {
  Bob:   {
           hobbies: ['cycling', 'swimming'],
           pets: ['cat', 'dog']
         },
  Alice: {
           hobbies: ['cycling, 'chess'],
           pets: ['fish', 'dog']
         }
}

我需要为每个用户、爱好和宠物创建一个多选。

例如，Bob 和 Alice 各有两个多选，一个用于爱好，一个用于宠物。Cycling 为关联用户提供了多项选择（它会同时选择 Bob 和 Alice）。Cat 对关联用户有一个多重选择（它将选择 Bob，而未选择 Alice）。

我遇到的问题是如何在 Cat 多选中处理用户的选择/取消选择及其对用户宠物多选的影响。

我目前正在从我的数据源中派生 byUser、byPet 和 byHobby 对象，然后从这些对象生成三个不同的 FormGroup。问题是我现在有三个独立的数据源。我想让一个表单组中的更改将更改应用于其他表单组，以便数据保持同步。

有没有更优雅的解决方案可以让我以某种方式使用单个 FormGroup？

标签： angularangular-reactive-forms

Answer 1

您可以在从一个下拉列表中选择数据时使用数据中的过滤器选项