1/10/2024 0 Comments Phoenix liveview form![]() ![]() |> unique_constraint(:name, name: :variants_name_value_product_id_index)ĭefp maybe_mark_for_deletion(%īack in the form, I should now be able to add a new variant line:Īnd if I click the cross in the delete column, it should be removed. In addition to phx-disable-with, Phoenix LiveView also includes a number of CSS based features to provide immediate user feedback. |> Map.put(:temp_id, (variant.temp_id || attrs)) # So its persisted When a LiveView form is submitted, the button will be instantly disabled with Saving, then restored once the action is acknowledged by the server. So, in the schema, add: field :temp_id, :string, virtual: trueĪnd in the changeset, change to: def changeset(variant, attrs) do And then in the changeset, look if that is filled in, and if so, delete it.įor my example, I also need another virtual field so I can keep track on the non persisted lines. ![]() To be able to delete a nested resource from a parent form, you need to add a virtual :delete field. Speaking of Variant, we need to do changes there as well. Make sure that has_many-relationship is setup. Now, when the attributes contain the "variants" key, the attached data will be handled of the changeset in the Variant-module. Open lib/tutorial/products/product.ex and in the changeset, add the line: |> cast_assoc(:variants) To be able for a product changeset to handle the variants, I need to tell the changeset do just that. That ensures better UX when using the form later. Note, that I want to preload variants in the specific order they where created in. |> Repo.preload(variants: from(v in Variant, order_by: v.id)) Open lib/tutorial/products.exĪnd change def get_product!(id), do: Repo.get!(Product, id) to: def get_product!(id) do However, if the lines are persisted and I edit the lines, I need to be able to mark them as being deleted.įirst thing I need to do is to preload variants when I get one product. However, if youre using the dialog to show a form where the user must fill in lots of. I also want to be able to remove individual lines that are not yet persisted. In Phoenix LiveView, when dispatching events in live components. I want to the form to be able to add dynamically add several lines of variant forms and save them in one shot. The topic for this tutorial is to show you how to setup a nested model form with Phoenix LiveView where you can add and remove fields on the fly. But what I didn’t go through was to setup a form where you can manage the variants. defmodule TutorialWeb.ProductFormLive doĭef mount(%.I my last article, I set up a relationship between products and variants. The initial content will be a very basic LiveView component. Then create the file lib/tutorial_web/live/product_form_live.ex. Now, I can stop the server and create a folder called live inside the /tutorial_web/ folder. |> validate_number(:price, greater_than: 0) In the file lib/tutorial/products/product.ex, I can add the extra validation rules in the bottom of the changeset function. For example, I want to make sure that the name needs to be of a specific length and the price needs to be larger than zero. Next step is to customize some validation rules. I can now start the server with mix phx.server When that is generated, follow the instructions and add the resources in the routes and run mix ecto.migrate mix Products Product products name description:text price:float In this tutorial I already have a project setup but I want to generate a resource for products. ![]() However, with Phoenix LiveView, the problem with providing form validation is to a large extent solved. The problem has always been that you need to have validation logic in both backend and frontend. One thing that has always been problematic is when providing live form validation for a user that interacts with a form. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |