useFormNavigationGuard

useFormNavigationGuard(form): void

Defined in: navigationGuard.ts:95

Guard against leaving the page while the form has unsaved changes

Parameters

form

Form<any>

Form instance

Returns

void

Remarks

While the component is mounted, the form counts toward hasUnsavedForms:

• Closing or reloading the tab, or leaving for another site, brings up the browser's confirmation dialog while the form is dirty, through the beforeunload event.
• Navigation inside the app goes through the router, which asks hasUnsavedForms.

The form's Form.isDirty includes its sub-forms, so guarding the root form covers them. A form that several components guard stays guarded until the last of them unmounts.

Example

const InvoiceForm: React.FC<{ model: Invoice }> = observer(({ model }) => {
  const form = Form.get(model);
  useFormNavigationGuard(form);
  return (...);
});