phoenix-framework - 如何动态地将嵌套表单字段添加到当前表单中？

Question

我在 Users 之间有一个多对多的关系和 Chatgroups .直觉上，Users可以有很多Chatgroups和每个 Chatgroup可以有很多用户。

我已经使用名为 UserChatGroup 的连接表实现了这一点。 .

在我的聊天组 Controller 中，当路由到 new 时功能，我可以通过指定 userChatGroups:[%UserChatGroup{},%UserChatGroup{}] 硬编码聊天组中的成员数量等等，其中硬编码的数字是这个数组的大小。

例如，我的新聊天组 Controller 硬编码 1 个用户:

def new(conn, _params) do
    changeset = ChatGroup.changeset(%ChatGroup{userChatGroups: [%UserChatGroup{}]})
    render(conn, "new.html", changeset: changeset)
end

在我的 new 模板中，它引用了一个表单。表格的相关部分如下:

 <%= inputs_for f, :userChatGroups, fn i -> %>
    <div class="form-group">
      <%= label i, :user_id, "User Id", class: "control-label" %>
      <%= number_input i, :user_id, class: "form-control" %>

    </div>
 <% end %>

但是我想删除聊天组中这个硬编码的成员数量。相反，我希望用户能够动态添加成员。

但是，我遇到了麻烦。这样做的 rails 方法是调用一个函数来访问表单对象并更新它。然后用javascript插入输入字段。提交时，新的输入字段将是新表单对象的字段。

但是我不知道如何使用 Phoenix 框架来做到这一点。

我的第一个问题:

如何在我的 view.html.eex 中定义函数这样它们就可以在点击时被调用而不是立即呈现？似乎当我尝试使用 <%= functionFromMyView %> 时该函数在我的页面初始加载时呈现。我想在单击“添加”按钮时调用此函数，因此我需要弄清楚如何仅在单击时调用此函数。那可能吗？

问题 2，更具体到我的用例:

如何添加 %UserChatGroup{}动态到我的表单？

我假设一旦我能弄清楚如何通过单击从我的 View 中调用一个函数，那么我就可以使用该函数插入一个 %UserChatGroup{}到我的表单，然后使用 javascript，插入一个输入字段，该字段连接到新插入的嵌套 UserChatGroup field 。

任何指导将不胜感激。

Answer 1

我无法添加 %UserChatGroup{}到我的表格。

我相信这是因为网络是 HTML、CSS 和 JS，而上面是 Elixir .

因此我认为我的解决方案必须是 javascript。

我检查了页面上的 html，它告诉我 %UserChatGroup{}输入字段有一个名称 name="chat_group[userChatGroups][0][user_id]"chat_group是我正在创建的模型的名称，
userChatGroups是我创建的用于处理聊天组成员的数组，
[0]是输入数组的索引，可以像你想要的那样大
user_id是我的连接表中的字段。

索引是您需要更改的唯一值。

使用 javascript，我在表单中插入了输入字段，带有 name="chat_group[userChatGroups][--indexnumber--][user_id]"并且在提交时，表单自然也会提交我新添加的输入。 (替换索引号)

这种方式可以根据需要添加尽可能多的聊天组用户。