Custom Layout with Submit Button

[megacherry]

Hello all,

Is it possible to place the submit button variably in the custom layout?

I have created a FormContainer as indicated in the setup tips, which already contains a Submit button and is always placed below the form.

What is the best way to solve this?

Thanks.

Andy

[iway1]

You should be able to pass a child <button type='submit'/> element in the layout:

<Form>
  {({fieldOne, fieldTwo})=>{
    return (
      <div>
        {fieldOne}
        <button type='submit'>
          Submit
        </button>
        {fieldTwo}
      </div>
    )
  }}
</Form>

Note that the layout will still be rendered within the form container in this case, so if you had a custom submit button in the container it will be rendered as well after the div here.

If you're planning on using custom layouts for all of your forms where you render the submit button in variable places in the UI, it might make sense to not have it be rendered in the form container at all and just render a <button/> in the layout each time.

But if it's just for select layouts then one option is to have a prop to hide the submit button:

function FormContainer({hideButton}:{hideButton?: boolean}) {
  // hides button when hideButton=true
}


function MyPage() {
  return (
    <Form formProps={{hideButton: true}}>
      {/*render custom layout*/}
    </Form>
  )
}

[megacherry]

thank you very much :)

👍