How to add a dynamic field of a nested form to the current form?

Question

I have many different relationships between Users and Chatgroups . Intuitively, Users can have many Chatgroups , and each Chatgroup can have many users.

I implemented this using the UserChatGroup connection UserChatGroup .

In my Chatgroup controller, when it is redirected to the new function, I can rigidly indicate the number of chat members by specifying userChatGroups:[%UserChatGroup{},%UserChatGroup{}] , etc., where hardcoded number is the size of this array.

For example, my controller for the new chat group with hardcodes is 1 user:

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

and in my template for new it refers to the form. The relevant section of the form is shown below:

  <%= 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 %> 

However, I would like to remove this hard-coded number of members in the chat group. Instead, I want the user to be able to dynamically add members.

I am having problems with this. Rails do this to call a function that accesses the form object and updates it. Then paste the input fields using javascript. When sending, new input fields will be fields for the new form object.

However, I cannot figure out how to do this with the Phoenix Framework.

My first question is:

• How to define functions in my view.html.eex so that they can be called with a click, and not just displayed immediately? It seems like when I try to use <%= functionFromMyView %> , the function is displayed when my page loads. I want to call this function when I click the add button, so I need to figure out how to call this function only when clicked. Is it possible?

Question 2, more specific to my use case:

2. How to add a dynamic %UserChatGroup{} form to my form?

I assume that as soon as I can figure out how to call a function from my view when I click, I can use this function to insert %UserChatGroup{} into my form and then use javascript to insert an input field that connects to the newly inserted nested field UserChatGroup .

Everyone is welcome any guide.

Answer 1

I was unable to add %UserChatGroup{} to my form.

I believe this is because there is HTML, CSS and JS on the Internet, while Elixir was above.

Therefore, I assume my solution should be javascript.

I looked at the html on the page that informed me that the %UserChatGroup{} input field has the name name="chat_group[userChatGroups][0][user_id]"

chat_group is the name of the model I'm creating,

userChatGroups is the array that I created to process the members of the chat group,

[0] is the index of the input array and can be as large as you want the group to be

user_id is a field in my connection table.

Index is the only value that needs to be changed.

With javascript, I inserted input fields into my form using name="chat_group[userChatGroups][--indexnumber--][user_id]" , and when submitting the form would naturally also represent my newly added input. (replace indexNumber)

This method can handle adding as many chat group users as possible.