fix(core): remove mount validation on touch (#726)

* fix: remove mount validation on touch * ci: apply automated fixes and generate docs * fix: tests * ci: apply automated fixes and generate docs * test: check onChange and onMount overlapping --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TanStack · Nov 4, 2024 · dbaf283 · dbaf283
1 parent 968269a
commit dbaf283
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 22 deletions.
diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md
@@ -121,7 +121,7 @@ deleteField<TField>(field): void
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1083](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1083)
+[packages/form-core/src/FormApi.ts:1102](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1102)
 
 ***
 
@@ -147,7 +147,7 @@ Gets the field info of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:999](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L999)
+[packages/form-core/src/FormApi.ts:1013](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1013)
 
 ***
 
@@ -173,7 +173,7 @@ Gets the metadata of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:990](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L990)
+[packages/form-core/src/FormApi.ts:1004](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1004)
 
 ***
 
@@ -199,7 +199,7 @@ Gets the value of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:983](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L983)
+[packages/form-core/src/FormApi.ts:997](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L997)
 
 ***
 
@@ -217,7 +217,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:923](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L923)
+[packages/form-core/src/FormApi.ts:937](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L937)
 
 ***
 
@@ -253,7 +253,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1115](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1115)
+[packages/form-core/src/FormApi.ts:1134](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1134)
 
 ***
 
@@ -269,7 +269,7 @@ mount(): void
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:499](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L499)
+[packages/form-core/src/FormApi.ts:513](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L513)
 
 ***
 
@@ -305,7 +305,7 @@ Moves the value at the first specified index to the second specified index withi
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1233](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1233)
+[packages/form-core/src/FormApi.ts:1252](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1252)
 
 ***
 
@@ -338,7 +338,7 @@ Pushes a value into an array field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1097](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1097)
+[packages/form-core/src/FormApi.ts:1116](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1116)
 
 ***
 
@@ -371,7 +371,7 @@ Removes a value from an array field at the specified index.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1168](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1168)
+[packages/form-core/src/FormApi.ts:1187](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1187)
 
 ***
 
@@ -407,7 +407,7 @@ Replaces a value into an array field at the specified index.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1142](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1142)
+[packages/form-core/src/FormApi.ts:1161](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1161)
 
 ***
 
@@ -425,7 +425,7 @@ Resets the form state to the default values.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:562](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L562)
+[packages/form-core/src/FormApi.ts:576](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L576)
 
 ***
 
@@ -449,7 +449,7 @@ resetFieldMeta<TField>(fieldMeta): Record<TField, FieldMeta>
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1033](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1033)
+[packages/form-core/src/FormApi.ts:1047](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1047)
 
 ***
 
@@ -471,7 +471,7 @@ Updates the form's errorMap
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1257](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1257)
+[packages/form-core/src/FormApi.ts:1276](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1276)
 
 ***
 
@@ -499,7 +499,7 @@ Updates the metadata of the specified field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1018](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1018)
+[packages/form-core/src/FormApi.ts:1032](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1032)
 
 ***
 
@@ -532,7 +532,7 @@ Sets the value of the specified field and optionally updates the touched state.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1057](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1057)
+[packages/form-core/src/FormApi.ts:1071](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1071)
 
 ***
 
@@ -568,7 +568,7 @@ Swaps the values at the specified indices within an array field.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:1207](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1207)
+[packages/form-core/src/FormApi.ts:1226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1226)
 
 ***
 
@@ -590,7 +590,7 @@ Updates the form options and form state.
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:522](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L522)
+[packages/form-core/src/FormApi.ts:536](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L536)
 
 ***
 
@@ -612,7 +612,7 @@ Validates all fields in the form using the correct handlers for a given validati
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:577](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L577)
+[packages/form-core/src/FormApi.ts:591](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L591)
 
 ***
 
@@ -645,7 +645,7 @@ Validates the children of a specified array in the form starting from a given in
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L611)
+[packages/form-core/src/FormApi.ts:625](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L625)
 
 ***
 
@@ -673,4 +673,4 @@ Validates a specified field in the form using the correct handlers for a given v
 
 #### Defined in
 
-[packages/form-core/src/FormApi.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L650)
+[packages/form-core/src/FormApi.ts:664](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L664)
diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts
@@ -412,9 +412,21 @@ export class FormApi<
           const isTouched = fieldMetaValues.some((field) => field?.isTouched)
           const isBlurred = fieldMetaValues.some((field) => field?.isBlurred)
 
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          if (isTouched && state?.errorMap?.onMount) {
+            state.errorMap.onMount = undefined
+          }
+
           const isDirty = fieldMetaValues.some((field) => field?.isDirty)
           const isPristine = !isDirty
 
+          const hasOnMountError = Boolean(
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            state.errorMap?.onMount ||
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+              fieldMetaValues.some((f) => f?.errorMap?.onMount),
+          )
+
           const isValidating = isFieldsValidating || state.isFormValidating
           state.errors = Object.values(state.errorMap).reduce((prev, curr) => {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -431,7 +443,9 @@ export class FormApi<
           const isFormValid = state.errors.length === 0
           const isValid = isFieldsValid && isFormValid
           const canSubmit =
-            (state.submissionAttempts === 0 && !isTouched) ||
+            (state.submissionAttempts === 0 &&
+              !isTouched &&
+              !hasOnMountError) ||
             (!isValidating && !state.isSubmitting && isValid)
 
           state = {
@@ -1068,6 +1082,11 @@ export class FormApi<
           isTouched: true,
           isBlurred: true,
           isDirty: true,
+          errorMap: {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            ...prev?.errorMap,
+            onMount: undefined,
+          },
         }))
       }
 

diff --git a/packages/form-core/tests/FieldApi.spec.ts b/packages/form-core/tests/FieldApi.spec.ts
@@ -1080,6 +1080,89 @@ describe('field api', () => {
     expect(field.getMeta().errors).toStrictEqual(['first name is required'])
   })
 
+  it('should disable submit with onMount errors', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'firstName',
+      validators: {
+        onMount: ({ value }) =>
+          value.length > 0 ? undefined : 'first name is required',
+      },
+    })
+
+    form.mount()
+    field.mount()
+
+    expect(form.state.canSubmit).toBe(false)
+  })
+
+  it('should remove onMount errors on a field when its value changes', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+        lastName: '',
+      },
+    })
+
+    const firstName = new FieldApi({
+      form,
+      name: 'firstName',
+      validators: {
+        onMount: ({ value }) =>
+          value.length > 0 ? undefined : 'first name is required',
+        onChange: ({ value }) =>
+          value.length > 3 ? undefined : 'first name must be at least 4 chars',
+      },
+    })
+
+    const lastName = new FieldApi({
+      form,
+      name: 'lastName',
+      validators: {
+        onMount: ({ value }) =>
+          value.length > 0 ? undefined : 'last name is required',
+        onChange: ({ value }) =>
+          value.length > 3 ? undefined : 'last name must be at least 4 chars',
+      },
+    })
+
+    form.mount()
+    firstName.mount()
+    lastName.mount()
+
+    expect(firstName.getMeta().errorMap.onMount).toStrictEqual(
+      'first name is required',
+    )
+    expect(firstName.getMeta().errors).toStrictEqual(['first name is required'])
+    expect(lastName.getMeta().errors).toStrictEqual(['last name is required'])
+    expect(lastName.getMeta().errorMap.onMount).toStrictEqual(
+      'last name is required',
+    )
+
+    firstName.setValue('firstName')
+    expect(firstName.getMeta().errors).toStrictEqual([])
+    expect(firstName.getMeta().errorMap.onMount).toStrictEqual(undefined)
+    expect(lastName.getMeta().errors).toStrictEqual(['last name is required'])
+    expect(lastName.getMeta().errorMap.onMount).toStrictEqual(
+      'last name is required',
+    )
+
+    firstName.setValue('f')
+    expect(firstName.getMeta().errors).toStrictEqual([
+      'first name must be at least 4 chars',
+    ])
+    expect(firstName.getMeta().errorMap.onMount).toStrictEqual(undefined)
+    expect(firstName.getMeta().errorMap.onChange).toStrictEqual(
+      'first name must be at least 4 chars',
+    )
+  })
+
   it('should cancel previous functions from an async validator with an abort signal', async () => {
     vi.useFakeTimers()
 

diff --git a/packages/form-core/tests/FormApi.spec.ts b/packages/form-core/tests/FormApi.spec.ts
@@ -1233,6 +1233,35 @@ describe('form api', () => {
     })
   })
 
+  it('should remove onMount error when the form is touched', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: 'other',
+      },
+      validators: {
+        onMount: ({ value }) => {
+          if (value.name === 'other') return 'Please enter a different value'
+          return
+        },
+      },
+    })
+    const field = new FieldApi({
+      form,
+      name: 'name',
+    })
+
+    form.mount()
+    field.mount()
+
+    expect(form.state.errors).toStrictEqual(['Please enter a different value'])
+    expect(form.state.errorMap).toEqual({
+      onMount: 'Please enter a different value',
+    })
+
+    form.setFieldValue('name', 'test')
+    expect(form.state.errors).toStrictEqual([])
+  })
+
   it('should validate fields during submit', async () => {
     const form = new FormApi({
       defaultValues: {