How do you approach complex forms in LiveView?

I am not sure that this is specific to ash_phoenix, but that’s what I am using

ash_phoenix makes it pretty easy to build nested forms, but things get ugly pretty fast when some logic or non-standard controls appear in the form.

I have 3 resources: EntityType, Entity and Account. Entity belongs to EntityType, and Account belongs to EntityType optionally (entity_type_id in Account can be null).

I need to build a form that creates a resource call Template:

defmodule F0nance.Templates.TemplateEntry do
  use Ash.Resource, data_layer: :embedded

  actions do
    defaults [:read, :destroy, create: :*, update: :*]
  end

  attributes do
    uuid_v7_primary_key :id
    attribute :debet_entity_param, :uuid_v7, allow_nil?: true
    attribute :credit_entity_param, :uuid_v7, allow_nil?: true
  end

  relationships do
    belongs_to :debet, F0nance.Accounts.Account, allow_nil?: false, public?: true
    belongs_to :debet_entity, F0nance.Accounts.Entity, allow_nil?: true, public?: true
    belongs_to :credit, F0nance.Accounts.Account, allow_nil?: false, public?: true
    belongs_to :credit_entity, F0nance.Accounts.Entity, allow_nil?: true, public?: true
  end
end
defmodule F0nance.Templates.TemplateParam do
  use Ash.Resource, data_layer: :embedded

  actions do
    defaults [:read, :destroy, create: :*, update: :*]
  end

  validations do
    validate present(:entity_type_id) do
      where attribute_equals(:type, :entity)
    end
  end

  attributes do
    uuid_v7_primary_key :id
    attribute :name, :string, allow_nil?: false, public?: true
    attribute :type, :atom, allow_nil?: false, constraints: [one_of: [:entity]], public?: true
  end

  relationships do
    belongs_to :entity_type, F0nance.Accounts.EntityType, allow_nil?: true, public?: true
  end
end
defmodule F0nance.Templates.Template do
  alias F0nance.Templates.TemplateEntry
  alias F0nance.Templates.TemplateParam

  use Ash.Resource, domain: F0nance.Templates, data_layer: AshPostgres.DataLayer

  postgres do
    table "templates"
    repo F0nance.Repo
  end

  actions do
    defaults [:read]

    create :create do
      primary? true
      accept [:name, :description, :entries, :params]
    end
  end

  attributes do
    uuid_v7_primary_key :id
    attribute :name, :ci_string, allow_nil?: false

    attribute :description, :string
    attribute :params, {:array, TemplateParam}, allow_nil?: false, default: []
    attribute :entries, {:array, TemplateEntry}, allow_nil?: false, default: []

    create_timestamp :created_at
    update_timestamp :updated_at
  end

  identities do
    identity :name, [:name], message: "Template names must be unique"
  end
end

And this is the current prototype

One thing is that complicates things is that I am using a custom-built combo box to search for different related items (for example, accounts or entity types), and since the form only has ID of the resource that is selected, I need to make a database query to find the name. And since there is no way to put this into the form struct, I need to put it to a separate assign, and the fact that the form is nested makes the code too verbose. Another thing is that there will be more param types besides Entity, so I will need conditional display of other controls in place of Entity type. Again, the template becomes too verbose.

In journal entries sections, I also need to check if account belongs to an entity type, and if it does, I need to display a select with options listing all the params with “entity” type, and an additional option saying “fixed entity”. And again, if that “fixed entity” option is selected, an additional control has to be added to select an entity.

What I am doing is on form change I go through the nested forms and collect information about which resources need to be loaded ( “Participants” entity type and “Expenses” account in the example above) , and also generate the select options.

I think I will have to traverse the nested forms and collect and reorganize data in any case. But for the template, probably I could make a bunch of components and move all that conditional logic into the components’ modules. It’s just trading one complexity for another, but at least the HTML would be cleaner and easier to read

How do you approach similar problems?