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

时间:2015-10-06 01:26:28

标签: phoenix-framework

UsersChatgroups之间存在多对多关系。直观地,Users可以包含多个Chatgroups,每个Chatgroup可以拥有多个用户。

我已使用名为UserChatGroup的连接表实现了此功能。

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

例如,我的新聊天组控制器硬编码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,更具体到我的用例:

    1. 如何动态添加%UserChatGroup{}到我的表单?
    2. 我假设一旦我可以弄清楚如何在点击时从我的视图中调用一个函数,那么我可以使用该函数将%UserChatGroup{}插入到我的表单然后使用javascript,插入连接到新插入的嵌套UserChatGroup字段的输入字段。

      非常感谢任何指导。

1 个答案:

答案 0 :(得分:4)

我无法在表单中添加%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]",并且在提交时,表单自然也会提交我新添加的输入。 (替换indexNumber)

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