@tanstack/form-core 0.20.2 → 0.21.0

package/src/FormApi.ts

@@ -370,6 +370,59 @@ export class FormApi<
     return fieldErrorMapMap.flat()
   }
 
+  validateArrayFieldsStartingFrom = async <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    index: number,
+    cause: ValidationCause,
+  ) => {
+    const currentValue = this.getFieldValue(field)
+
+    const lastIndex = Array.isArray(currentValue)
+      ? Math.max(currentValue.length - 1, 0)
+      : null
+
+    // We have to validate all fields that have shifted (at least the current field)
+    const fieldKeysToValidate = [`${field}[${index}]`]
+    for (let i = index + 1; i <= (lastIndex ?? 0); i++) {
+      fieldKeysToValidate.push(`${field}[${i}]`)
+    }
+
+    // We also have to include all fields that are nested in the shifted fields
+    const fieldsToValidate = Object.keys(this.fieldInfo).filter((fieldKey) =>
+      fieldKeysToValidate.some((key) => fieldKey.startsWith(key)),
+    ) as DeepKeys<TFormData>[]
+
+    // Validate the fields
+    const fieldValidationPromises: Promise<ValidationError[]>[] = [] as any
+    this.store.batch(() => {
+      fieldsToValidate.forEach((nestedField) => {
+        fieldValidationPromises.push(
+          Promise.resolve().then(() => this.validateField(nestedField, cause)),
+        )
+      })
+    })
+
+    const fieldErrorMapMap = await Promise.all(fieldValidationPromises)
+    return fieldErrorMapMap.flat()
+  }
+
+  validateField = <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    cause: ValidationCause,
+  ) => {
+    // eslint-disable-next-line  @typescript-eslint/no-unnecessary-condition
+    const fieldInstance = this.fieldInfo[field]?.instance
+    if (!fieldInstance) return []
+
+    // If the field is not touched (same logic as in validateAllFields)
+    if (!fieldInstance.state.meta.isTouched) {
+      // Mark it as touched
+      fieldInstance.setMeta((prev) => ({ ...prev, isTouched: true }))
+    }
+
+    return fieldInstance.validate(cause)
+  }
+
   // TODO: This code is copied from FieldApi, we should refactor to share
   validateSync = (cause: ValidationCause) => {
     const validates = getSyncValidatorArray(cause, this.options)
@@ -689,14 +742,39 @@ export class FormApi<
       : never,
     opts?: { touch?: boolean },
   ) => {
-    return this.setFieldValue(
+    this.setFieldValue(
       field,
       (prev) => [...(Array.isArray(prev) ? prev : []), value] as any,
       opts,
     )
+    this.validateField(field, 'change')
+  }
+
+  insertFieldValue = async <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    index: number,
+    value: DeepValue<TFormData, TField> extends any[]
+      ? DeepValue<TFormData, TField>[number]
+      : never,
+    opts?: { touch?: boolean },
+  ) => {
+    this.setFieldValue(
+      field,
+      (prev) => {
+        return [
+          ...(prev as DeepValue<TFormData, TField>[]).slice(0, index),
+          value,
+          ...(prev as DeepValue<TFormData, TField>[]).slice(index),
+        ] as any
+      },
+      opts,
+    )
+
+    // Validate the whole array + all fields that have shifted
+    await this.validateField(field, 'change')
   }
 
-  insertFieldValue = <TField extends DeepKeys<TFormData>>(
+  replaceFieldValue = async <TField extends DeepKeys<TFormData>>(
     field: TField,
     index: number,
     value: DeepValue<TFormData, TField> extends any[]
@@ -713,6 +791,10 @@ export class FormApi<
       },
       opts,
     )
+
+    // Validate the whole array + all fields that have shifted
+    await this.validateField(field, 'change')
+    await this.validateArrayFieldsStartingFrom(field, index, 'change')
   }
 
   removeFieldValue = async <TField extends DeepKeys<TFormData>>(
@@ -746,30 +828,54 @@ export class FormApi<
       fieldsToDelete.forEach((f) => this.deleteField(f as TField))
     }
 
-    await this.validateAllFields('change')
+    // Validate the whole array + all fields that have shifted
+    await this.validateField(field, 'change')
+    await this.validateArrayFieldsStartingFrom(field, index, 'change')
   }
 
   swapFieldValues = <TField extends DeepKeys<TFormData>>(
     field: TField,
     index1: number,
     index2: number,
+    opts?: { touch?: boolean },
   ) => {
-    this.setFieldValue(field, (prev: any) => {
-      const prev1 = prev[index1]!
-      const prev2 = prev[index2]!
-      return setBy(setBy(prev, `${index1}`, prev2), `${index2}`, prev1)
-    })
+    this.setFieldValue(
+      field,
+      (prev: any) => {
+        const prev1 = prev[index1]!
+        const prev2 = prev[index2]!
+        return setBy(setBy(prev, `${index1}`, prev2), `${index2}`, prev1)
+      },
+      opts,
+    )
+
+    // Validate the whole array
+    this.validateField(field, 'change')
+    // Validate the swapped fields
+    this.validateField(`${field}[${index1}]` as DeepKeys<TFormData>, 'change')
+    this.validateField(`${field}[${index2}]` as DeepKeys<TFormData>, 'change')
   }
 
   moveFieldValues = <TField extends DeepKeys<TFormData>>(
     field: TField,
     index1: number,
     index2: number,
+    opts?: { touch?: boolean },
   ) => {
-    this.setFieldValue(field, (prev: any) => {
-      prev.splice(index2, 0, prev.splice(index1, 1)[0])
-      return prev
-    })
+    this.setFieldValue(
+      field,
+      (prev: any) => {
+        prev.splice(index2, 0, prev.splice(index1, 1)[0])
+        return prev
+      },
+      opts,
+    )
+
+    // Validate the whole array
+    this.validateField(field, 'change')
+    // Validate the moved fields
+    this.validateField(`${field}[${index1}]` as DeepKeys<TFormData>, 'change')
+    this.validateField(`${field}[${index2}]` as DeepKeys<TFormData>, 'change')
   }
 }
 

package/src/tests/FieldApi.spec.ts

@@ -107,6 +107,35 @@ describe('field api', () => {
     expect(field.getValue()).toStrictEqual(['one', 'other'])
   })
 
+  it('should run onChange validation when pushing an array fields value', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test'],
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+      validators: {
+        onChange: ({ value }) => {
+          if (value.length < 3) {
+            return 'At least 3 names are required'
+          }
+          return
+        },
+      },
+    })
+    field.mount()
+
+    field.pushValue('other')
+
+    expect(field.getMeta().errors).toStrictEqual([
+      'At least 3 names are required',
+    ])
+  })
+
   it('should insert a value into an array value correctly', () => {
     const form = new FormApi({
       defaultValues: {
@@ -121,7 +150,73 @@ describe('field api', () => {
 
     field.insertValue(1, 'other')
 
-    expect(field.getValue()).toStrictEqual(['one', 'other'])
+    expect(field.getValue()).toStrictEqual(['one', 'other', 'two'])
+  })
+
+  it('should replace a value into an array correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.replaceValue(1, 'other')
+
+    expect(field.getValue()).toStrictEqual(['one', 'other', 'three'])
+  })
+
+  it('should do nothing when replacing a value into an array at an index that does not exist', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.replaceValue(10, 'other')
+
+    expect(field.getValue()).toStrictEqual(['one', 'two', 'three'])
+  })
+
+  it('should run onChange validation when inserting an array fields value', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test'],
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+      validators: {
+        onChange: ({ value }) => {
+          if (value.length < 3) {
+            return 'At least 3 names are required'
+          }
+          return
+        },
+      },
+      defaultMeta: {
+        isTouched: true,
+      },
+    })
+    field.mount()
+
+    field.insertValue(1, 'other')
+
+    expect(field.getMeta().errors).toStrictEqual([
+      'At least 3 names are required',
+    ])
   })
 
   it('should remove a value from an array value correctly', () => {
@@ -141,6 +236,38 @@ describe('field api', () => {
     expect(field.getValue()).toStrictEqual(['one'])
   })
 
+  it('should run onChange validation when removing an array fields value', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test'],
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+      validators: {
+        onChange: ({ value }) => {
+          if (value.length < 3) {
+            return 'At least 3 names are required'
+          }
+          return
+        },
+      },
+      defaultMeta: {
+        isTouched: true,
+      },
+    })
+    field.mount()
+
+    await field.removeValue(0)
+
+    expect(field.getMeta().errors).toStrictEqual([
+      'At least 3 names are required',
+    ])
+  })
+
   it('should remove a subfield from an array field correctly', async () => {
     const form = new FormApi({
       defaultValues: {
@@ -269,6 +396,38 @@ describe('field api', () => {
     expect(field.getValue()).toStrictEqual(['two', 'one'])
   })
 
+  it('should run onChange validation when swapping an array fields value', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test', 'test2'],
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+      validators: {
+        onChange: ({ value }) => {
+          if (value.length < 3) {
+            return 'At least 3 names are required'
+          }
+          return
+        },
+      },
+      defaultMeta: {
+        isTouched: true,
+      },
+    })
+    field.mount()
+
+    field.swapValues(0, 1)
+
+    expect(field.getMeta().errors).toStrictEqual([
+      'At least 3 names are required',
+    ])
+  })
+
   it('should move a value from an array value correctly', () => {
     const form = new FormApi({
       defaultValues: {
@@ -286,6 +445,38 @@ describe('field api', () => {
     expect(field.getValue()).toStrictEqual(['three', 'one', 'two', 'four'])
   })
 
+  it('should run onChange validation when moving an array fields value', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['test', 'test2'],
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+      validators: {
+        onChange: ({ value }) => {
+          if (value.length < 3) {
+            return 'At least 3 names are required'
+          }
+          return
+        },
+      },
+      defaultMeta: {
+        isTouched: true,
+      },
+    })
+    field.mount()
+
+    field.moveValue(0, 1)
+
+    expect(field.getMeta().errors).toStrictEqual([
+      'At least 3 names are required',
+    ])
+  })
+
   it('should not throw errors when no meta info is stored on a field and a form re-renders', async () => {
     const form = new FormApi({
       defaultValues: {