Dynamic Form

Not all forms are static. Some appear conditionally. For example, a reply form only shows after clicking reply; an edit button may swap in an edit form; comment, reply, and edit forms often share structure. sicilian calls these dynamic forms — the form's presence is dynamic while the input structure remains static.

For dynamic forms, use useForm since the form lifecycle must be bound to the component.

src/component/CommentInput.tsx

export function CommentInput({ initComment }: { initComment?: string }) {
  const COMMENT_FORM = useForm({
    initValue: {
      comment: initComment ?? ""
    },
    validator: {
      comment: {
        required: { required: true, message: "Please enter a comment" },
        maxLength: { number: 100, message: "Comments must be 100 characters or less" },
        custom: {
          checkFn: (value: string) => value !== initComment,
          message: "Comment has not been changed"
        }
      }
    },
    validateOn: ["submit", "change"],
  })
 
  return (
    <form onSubmit={COMMENT_FORM.handleSubmit((data) => {console.log(data)})}>
      <input {...COMMENT_FORM.register({ name: "comment" })}/>
      {COMMENT_FORM.getErrors("comment")}
      <button>submit</button>
    </form>
  )
}