Form.Section.EditContainer#

Demos#

View and edit container#

This demo shows the edit container opened by default by using the containerMode="edit" property.

const MyEditContainer = () => {
  return (
    <Form.Section.EditContainer>
      <Field.Name.First path="/firstName" />
      <Field.Name.Last path="/lastName" />
    </Form.Section.EditContainer>
  )
}
const MyViewContainer = () => {
  return (
    <Form.Section.ViewContainer>
      <Value.SummaryList>
        <Value.Name.First path="/firstName" />
        <Value.Name.Last path="/lastName" />
      </Value.SummaryList>
    </Form.Section.ViewContainer>
  )
}
render(
  <Form.Handler
    onSubmit={async (data) => console.log('onSubmit', data)}
    defaultData={{
      nestedPath: {
        firstName: 'Nora',
      },
    }}
  >
    <Form.Card>
      <Form.SubHeading>Your account</Form.SubHeading>
      <Form.Section path="/nestedPath" required containerMode="edit">
        <MyEditContainer />
        <MyViewContainer />
      </Form.Section>
    </Form.Card>
    <Form.SubmitButton />
  </Form.Handler>
)

Prevent uncommitted changes#

With preventUncommittedChanges, the user must select "Done" or "Cancel" before continuing to the next Wizard step, even when no values have changed.

<Form.Handler>
  <Wizard.Container>
    <Wizard.Step title="Profile">
      <Form.Section path="/profile" containerMode="edit">
        <Form.Section.EditContainer preventUncommittedChanges>
          <Field.Name.First path="/firstName" />
        </Form.Section.EditContainer>

        <Form.Section.ViewContainer>
          <Value.Name.First path="/firstName" />
        </Form.Section.ViewContainer>
      </Form.Section>

      <Wizard.Buttons />
    </Wizard.Step>

    <Wizard.Step title="Summary">
      <Value.Name.First path="/profile/firstName" />
      <Wizard.Buttons />
    </Wizard.Step>
  </Wizard.Container>
</Form.Handler>

Async onDone#

When onDone returns a Promise, the section stays in edit mode while it is pending. It switches to view mode when the Promise resolves and stays in edit mode when it rejects.

While the Promise is pending, the fields inside the section and its "Done" and "Cancel" buttons are disabled. This keeps the submitted values from changing while the save is in flight. Make sure the returned Promise always settles, because one that never resolves or rejects leaves the section disabled.

The demo starts with a simulated save error. Change the first name and select Done to verify that the input remains. Turn off Simulate save error and try again to complete the save.

const formId = 'async-on-done'
const Example = () => {
  const [error, setError] = useState<string>()
  const saveSection = async () => {
    setError(undefined)
    await new Promise((resolve) => setTimeout(resolve, 1500))
    const { getValue } = Form.getData(formId)
    if (getValue('/simulateError')) {
      setError('The section could not be saved. Try again.')
      throw new Error('The section could not be saved')
    }
  }
  return (
    <Form.Handler
      id={formId}
      defaultData={{
        profile: {
          firstName: 'Nora',
        },
        simulateError: true,
      }}
    >
      <Form.Card>
        <Form.Section path="/profile" containerMode="edit">
          <Form.Section.EditContainer onDone={saveSection}>
            <Field.Name.First path="/firstName" />
            <Field.Boolean
              path="//simulateError"
              label="Simulate save error"
              variant="button"
            />
            {error && <FormStatus>{error}</FormStatus>}
          </Form.Section.EditContainer>

          <Form.Section.ViewContainer>
            <Value.Name.First path="/firstName" />
          </Form.Section.ViewContainer>
        </Form.Section>
      </Form.Card>
    </Form.Handler>
  )
}
render(<Example />)

Edit on GitHub