You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .agents/skills/generate-frontend-forms/SKILL.md
+37-1Lines changed: 37 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -732,6 +732,20 @@ function MyForm() {
732
732
}
733
733
```
734
734
735
+
### Resetting After Save
736
+
737
+
When a form stays on the page after submission (e.g., settings pages), call `form.reset()` after a successful mutation. This re-syncs the form with updated `defaultValues` so it becomes pristine again — any UI that depends on the form being dirty (like conditionally shown Save/Cancel buttons) will update correctly.
738
+
739
+
```tsx
740
+
onSubmit: ({value}) =>
741
+
mutation
742
+
.mutateAsync(value)
743
+
.then(() =>form.reset())
744
+
.catch(() => {}),
745
+
```
746
+
747
+
> **Note**: `AutoSaveForm` handles this automatically. You only need to add this when using `useScrapsForm`.
748
+
735
749
### Submit Button
736
750
737
751
```tsx
@@ -828,7 +842,11 @@ onSubmit: ({value}) => {
828
842
// Return the promise to keep form.isSubmitting working
Make sure the zod schema's types are compatible with the API type. For example, if the API expects a string union like `'off' | 'low' | 'high'`, use `z.enum(['off', 'low', 'high'])` instead of `z.string()`.
917
935
936
+
### Form Reset After Save
937
+
938
+
```tsx
939
+
// ❌ Don't forget to reset forms that stay on the page after save
|`extraHelp`| JSX in layout | Render `<Text>` below field |
19
+
|`getData`|`mutationFn`| Transform data in mutation function |
20
+
|`mapFormErrors`|`setFieldErrors`| Transform API errors in catch block |
21
+
|`saveMessage`|`onSuccess`| Show toast in mutation onSuccess callback |
22
+
|`formatMessageValue`|`onSuccess`| Control toast content in onSuccess callback |
23
+
|`resetOnError`|`onError`| Call form.reset() in mutation onError |
24
+
|`saveOnBlur: false`|`useScrapsForm`| Use regular form with explicit Save button |
25
+
| (automatic) |`form.reset()`| Call after successful mutation if form stays on page |
26
+
|`help`|`hintText`| On layout components |
27
+
|`label`|`label`| On layout components |
28
+
|`required`|`required`| On layout + Zod schema |
28
29
29
30
## Feature Details
30
31
@@ -410,6 +411,20 @@ const form = useScrapsForm({
410
411
411
412
> **Note**: AutoSaveForm with TanStack Query already handles error states gracefully - the mutation's `isError` state is reflected in the UI. Manual reset is typically only needed for specific UX requirements like password fields.
412
413
414
+
### Resetting After Save
415
+
416
+
When using `useScrapsForm` for a form that stays on the page after save, call `form.reset()` after a successful mutation. This re-syncs the form with updated `defaultValues` so it becomes pristine again — any UI that depends on the form being dirty (like conditionally shown Save/Cancel buttons) will update correctly.
417
+
418
+
```tsx
419
+
onSubmit: ({value}) =>
420
+
mutation
421
+
.mutateAsync(value)
422
+
.then(() => form.reset())
423
+
.catch(() => {}),
424
+
```
425
+
426
+
> **Note**: `AutoSaveForm` handles this automatically. You only need to add this when using `useScrapsForm`.
427
+
413
428
### saveOnBlur: false → `useScrapsForm`
414
429
415
430
Fields with `saveOnBlur: false` showed an inline alert with Save/Cancel buttons instead of auto-saving. This was used for dangerous operations (slug changes) or large text edits (fingerprint rules).
@@ -597,6 +612,7 @@ This pattern is necessary whenever a required field has no meaningful initial va
597
612
- [ ] Handle `mapFormErrors` with setFieldErrors in catch
598
613
- [ ] Handle `saveMessage` in onSuccess callback
599
614
- [ ] Convert `saveOnBlur: false` fields to regular forms with Save button
615
+
- [ ] Call `form.reset()` after successful mutation (for forms that stay on page)
600
616
- [ ] Verify `onSuccess` cache updates merge with existing data (use updater function) — some API endpoints may return partial objects
601
617
- [ ] Wrap the migrated form with `<FormSearchroute="...">` if the old form was searchable in SettingsSearch
602
618
- [ ] Run `pnpm run extract-form-fields` and commit the updated `generatedFieldRegistry.ts`
0 commit comments