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

Question

我Users和他之间有很多关系Chatgroups.直观地说,Users可以有很多Chatgroups,每个Chatgroup可以有很多用户.

我用一个名为的连接表实现了这个UserChatGroup.

在我的Chatgroup控制器中,当路由到该new功能时,我可以通过指定userChatGroups:[%UserChatGroup{},%UserChatGroup{}]等来硬编码聊天组中的成员数,其中硬编码的数字是该数组的大小.

例如,我的新聊天组控制器硬编码1用户:

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

在我的新模板中,它引用了一个表单.表格的相关部分如下:

 <%= 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 Framework执行此操作.

我的第一个问题:

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

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

2. 如何%UserChatGroup{}动态添加到表单？

我假设一旦我可以弄清楚如何从我的视图中调用一个函数,然后我可以使用该函数将一个插入%UserChatGroup{}到我的表单然后使用javascript,插入一个连接到新插入的嵌套的输入字段UserChatGroup领域.

任何指导将不胜感激.

Answer 1

我无法将 a 添加%UserChatGroup{}到我的表单中。

我相信这是因为 Web 是 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]"在提交时，表单自然也会提交我新添加的输入。（替换索引号）

这种方式可以根据需要添加任意数量的聊天组用户。