I want to implement a view for teachers so they can add their students. It will be just a form containing name, age. and a add student button when the teacher clicks it shall add another form underneath the first and she can add as many as they can but the trick that every field shall have its own validations and then the render submit they will all be saved in the db.
attributes do
uuid_primary_key(:id)
attribute :email, :ci_string do
allow_nil?(false)
public?(true)
end
attribute :hashed_password, :string do
allow_nil?(false)
sensitive?(true)
end
attribute :age, :string do
allow_nil?(false)
end
attribute :full_name, :string do
allow_nil?(false)
end
create_timestamp(:inserted_at)
update_timestamp(:updated_at)
end
these are my attributes in the resource file and i also created the action create that i’ll be using while submitting and it works but with only one field which is the first one
defp render_step(1, assigns) do
~H"""
<div class="flex flex-col flex-1">
<%= for {student, index} <- Enum.with_index(@students) do %>
<.live_component
id={"students_form_add_#{index}"}
module={Myapp.Students}
student={student}
changeset={@changeset}
/>
<% end %>
<button phx-click="add_student" class="border border-[#121212] rounded-lg
flex flex-row gap-2 py-1.5 px-3 cursor-pointer w-1/5 mt-4">
<img src="/images/pluss.svg">
<p class="text-sm text-nowrap"> <%= gettext("Add another student") %>
</p>
</button>
</div>
"""
end
@impl true
def mount(_params, _session, socket) do
{:ok,
socket
|> assign(students: [%{name: "", age: ""}])
|> assign(
changeset:
Myapp.Accounts.Student
|> AshPhoenix.Form.for_create(:create, forms: [auto?: true])
|> to_form()
)
}
end
@impl true
def handle_event("validate_students", %{"form" => params}, socket) do
changeset = AshPhoenix.Form.validate(socket.assigns.changeset, params)
{:noreply, assign(socket, changeset: changeset)}
end
this render step, mount and the validation are in the liveview and the actual form is in a live_component because i was trying to loop over the live_component itself
def render(assigns) do
~H"""
<div class="flex flex-col flex-1 ml-5">
<.form id="student_form" phx-change="validate_students" phx-
submit="save_students">
<div class="flex space-x-4 items-center mb-4">
<div class="mt-4 flex-1">
<.input type="text" field={@changeset[:name]} label="Name" class="border-0
mt-1 block w-full focus:ring-[#FAFAFA] border border-[#FAFAFA] bg-[#FAFAFA]
rounded-lg px-2 py-3" placeholder="--" />
</div>
<div class="mt-4 flex-1">
<div class="relative">
<.input type="text" field={@changeset[:age]} label="Age" class="border-0
mt-1 block w-full focus:ring-[#FAFAFA] border border-[#FAFAFA] bg-[#FAFAFA]
rounded-lg px-2 py-3" placeholder="--" />
<div class="absolute inset-y-0 pl-3 flex items-center">
</div>
</div>
</div>
</div>
<div class="flex justify-end gap-2 " id="buttons">
<button phx-click="previous_step" class="flex bg-[#F7F7F7] text-black px-4
py-2 mt-4 rounded-md items-end rounded-xl"> <%= gettext("Previous") %>
</button>
<button
type="submit"
class="flex bg-[#1E1E20] text-white px-4 py-2 mt-4 rounded-md items-end
rounded-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
>
Save student
</button>
</div>
</.form>
</div>
"""
end
and this is the render in the live component. Can please anyone tell me how could i implement this specially the validation part. the for loop over the livecomponent it does add a form underneath the first however when I write in one it writes in all inputs with the same name.
