hilla: Binding Data to Forms should have more examples

[TatuLund]

E.g. in my demo app I use this way to setup useForm

const { value, model, field, invalid, submit, read } = useForm(TodoModel, { onSubmit: submitTodo }); submit callback is needed in non-trivial cases

  async function submitTodo(todo: Todo) {
    const saved = (await TodoEndpoint.save(todo)) ?? todo;
    if (adding) {
      setTodos([...todos, saved]);
    } else {
      setTodos(todos.map((item) => (item.id === saved.id ? saved : item)));
    }
  }

and calling submit, while using invalid to toggle button enabled state.

          <Button id="add" className="ml-auto" theme="primary" disabled={invalid} onClick={submit}>
            {adding ? 'Add' : 'Update'}
          </Button>

read is needed when populating the form, examples

  function edit(todo: Todo) {
    setAdding(false);
    read(todo);
  }

  function addNew(todo: Todo) {
    setAdding(true);
    read(empty);
  }

In my form I have popup dialog to set assignee, thus value needed

  function assignTodo(contact: Contact | undefined) {
    if (value) {
      value.assigned = contact;
      setAssigned(assigned);
      setDialogOpened(false);
    } else {
      setDialogOpened(false);
    }
  }

Full code: https://github.com/TatuLund/hilla-v2-demo/blob/master/frontend/views/todo/TodoView.tsx