field value dosen't persist

[nakayan5]

const Parent: FC = () => {
  const [step, setStep] = useState<1 | 2>(1)
  const [lastResult, action] = useFromState(func, {initialValue})
  const [form, field] = useForm({
  lastResult})

  const content = () => {
    switch (step)
      case 1:
        return <Child1 formId={form.id} name={field.name.name} onNext={onNext} />
      case 2:
        return <Child2 formId={form.id} name={field.age.name} onPrev={onPrev} />
  }

  return <FormProvider content={form.context}>
   <form {...getFormProps(form0} action={action} noValidate>
    {content()}
  </form>
  </FormProvider>
}

const Child1 = ({name, formId, onNext) => {
const [meta] = useField(name, {formId})

return <>
  <input {..getInputProps(meta, {type: 'text'}) />
  <button onClick={onNext)>next</button>
</>
}

const Child2 = ({name, formId, onPrev) => {
const [meta] = useField(name, {formId})

return <>
  <input {..getInputProps(meta, {type: 'text'}) />
  <button onClick={onPrev)>next</button>
</>
}

Conform version
v1.1.5

Steps to Reproduce the Bug or Issue

1. enter input name
2. Next button click
3. Prev button click
4. the value of input is empty

@edmundhung
Is this behavior a bug?

[edmundhung]

This is intentional as we use the DOM as the source of the FormData. If you would like to keep the value, please make it visually hidden instead of unmounting the input.

[nakayan5]

@edmundhung
I see.
Thanks for quick reply.

[brunobely]

Is there a canonical way to ensure hidden values haven't be changed by a user before submitting?

[edmundhung]

You can validate the value on the client side but there is no way to guarantee that the value won't be changed unless you validate it on the server too. What is your concern?