fix(form-core): prevent runtime errors when using deleteField (#1706)

* fix(core): fix deleteField method

* Create healthy-forks-live.md

* ci: apply automated fixes and generate docs

* Update healthy-forks-live.md

* chore: add tests

* ci: apply automated fixes and generate docs

---------

Co-authored-by: LeCarbonator <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

.changeset/healthy-forks-live.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/form-core': patch
+---
+
+fix(form-core): prevent runtime errors when using `deleteField`

packages/form-core/src/FormApi.ts

@@ -1642,6 +1642,11 @@ export class FormApi<
         for (const field of Object.keys(
           this.state.fieldMeta,
         ) as DeepKeys<TFormData>[]) {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          if (this.baseStore.state.fieldMetaBase[field] === undefined) {
+            continue
+          }
+
           const fieldMeta = this.getFieldMeta(field)
           if (!fieldMeta) continue
 
@@ -1845,6 +1850,11 @@ export class FormApi<
           for (const field of Object.keys(
             this.state.fieldMeta,
           ) as DeepKeys<TFormData>[]) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (this.baseStore.state.fieldMetaBase[field] === undefined) {
+              continue
+            }
+
             const fieldMeta = this.getFieldMeta(field)
             if (!fieldMeta) continue
 

packages/react-form/tests/useForm.test.tsx

@@ -892,4 +892,70 @@ describe('useForm', () => {
     await user.click(target)
     expect(result).toHaveTextContent('1')
   })
+
+  it('should not error when using deleteField in edge cases', async () => {
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+        validators: {
+          onChange: ({ value }) => {
+            const fields: Record<string, string> = {}
+
+            if (value.firstName.length === 0) {
+              fields.firstName = 'Last Name is required'
+            }
+
+            return { fields }
+          },
+        },
+      })
+
+      return (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            form.handleSubmit()
+          }}
+        >
+          <h1>Personal Information</h1>
+          <form.Field
+            name="firstName"
+            children={(field) => (
+              <input
+                data-testid="input"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
+            )}
+          />
+          <form.Field
+            name="lastName"
+            children={(field) => (
+              <input
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
+            )}
+          />
+          <button
+            type="button"
+            data-testid="remove"
+            onClick={() => form.deleteField('firstName')}
+          >
+            remove first name
+          </button>
+        </form>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    const removeButton = getByTestId('remove')
+    const input = getByTestId('input')
+
+    await user.type(input, 'a')
+    await user.click(removeButton)
+  })
 })