feat(form-core): field meta isDefaultValue

Author: harry-whorlow

packages/form-core/src/FieldApi.ts

@@ -656,6 +656,10 @@ export type FieldMetaDerived<
    * A boolean indicating if the field is valid. Evaluates `true` if there are no field errors.
    */
   isValid: boolean
+  /**
+   * A flag indicating whether the field's current value is the default value
+   */
+  isDefaultValue: boolean
 }
 
 export type AnyFieldMetaDerived = FieldMetaDerived<

packages/form-core/src/FormApi.ts

@@ -626,6 +626,10 @@ export type DerivedFormState<
    * A boolean indicating if none of the form's fields' values have been modified by the user. Evaluates `true` if the user have not modified any of the fields. Opposite of `isDirty`.
    */
   isPristine: boolean
+  /**
+   * A boolean indicating if all of the form's fields are the same as default values.
+   */
+  isDefaultValue: boolean
   /**
    * A boolean indicating if the form and all its fields are valid. Evaluates `true` if there are no errors.
    */
@@ -857,6 +861,7 @@ export class FormApi<
       }),
     )
 
+    // creates a tanstack store derived record of the fields derivedMeta that lazily updates
     this.fieldMetaDerived = new Derived({
       deps: [this.baseStore],
       fn: ({ prevDepVals, currDepVals, prevVal: _prevVal }) => {
@@ -883,21 +888,30 @@ export class FormApi<
         for (const fieldName of Object.keys(
           currBaseStore.fieldMetaBase,
         ) as Array<keyof typeof currBaseStore.fieldMetaBase>) {
-          const currBaseVal = currBaseStore.fieldMetaBase[
+          // an object representing the current fieldMeta
+          const currBaseMeta = currBaseStore.fieldMetaBase[
             fieldName as never
           ] as AnyFieldMetaBase
 
-          const prevBaseVal = prevBaseStore?.fieldMetaBase[
+          // an object representing the previous fieldMeta
+          const prevBaseMeta = prevBaseStore?.fieldMetaBase[
             fieldName as never
           ] as AnyFieldMetaBase | undefined
 
+          // an object representing the current fieldInfo
           const prevFieldInfo =
             prevVal?.[fieldName as never as keyof typeof prevVal]
 
+          // current field value
+          const curFieldVal = currBaseStore.values[fieldName as never]
+
           let fieldErrors = prevFieldInfo?.errors
-          if (!prevBaseVal || currBaseVal.errorMap !== prevBaseVal.errorMap) {
+          if (
+            !prevBaseMeta ||
+            currBaseMeta.errorMap !== prevBaseMeta.errorMap
+          ) {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            fieldErrors = Object.values(currBaseVal.errorMap ?? {}).filter(
+            fieldErrors = Object.values(currBaseMeta.errorMap ?? {}).filter(
               (val) => val !== undefined,
             ) as never
 
@@ -912,26 +926,31 @@ export class FormApi<
           }
 
           // As primitives, we don't need to aggressively persist the same referential value for performance reasons
-          const isFieldPristine = !currBaseVal.isDirty
           const isFieldValid = !isNonEmptyArray(fieldErrors ?? [])
+          const isFieldPristine = !currBaseMeta.isDirty
+          const isDefaultValue =
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            curFieldVal === this.options.defaultValues?.[fieldName as never]
 
           if (
             prevFieldInfo &&
             prevFieldInfo.isPristine === isFieldPristine &&
             prevFieldInfo.isValid === isFieldValid &&
+            prevFieldInfo.isDefaultValue === isDefaultValue &&
             prevFieldInfo.errors === fieldErrors &&
-            currBaseVal === prevBaseVal
+            currBaseMeta === prevBaseMeta
           ) {
             fieldMeta[fieldName] = prevFieldInfo
             originalMetaCount++
             continue
           }
 
           fieldMeta[fieldName] = {
-            ...currBaseVal,
+            ...currBaseMeta,
             errors: fieldErrors,
             isPristine: isFieldPristine,
             isValid: isFieldValid,
+            isDefaultValue: isDefaultValue,
           } as AnyFieldMeta
         }
 
@@ -981,6 +1000,9 @@ export class FormApi<
 
         const isTouched = fieldMetaValues.some((field) => field.isTouched)
         const isBlurred = fieldMetaValues.some((field) => field.isBlurred)
+        const isDefaultValue = fieldMetaValues.some(
+          (field) => field.isDefaultValue,
+        )
 
         const shouldInvalidateOnMount =
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -1059,6 +1081,7 @@ export class FormApi<
           prevVal.isTouched === isTouched &&
           prevVal.isBlurred === isBlurred &&
           prevVal.isPristine === isPristine &&
+          prevVal.isDefaultValue === isDefaultValue &&
           prevVal.isDirty === isDirty &&
           shallow(prevBaseStore, currBaseStore)
         ) {
@@ -1078,6 +1101,7 @@ export class FormApi<
           isTouched,
           isBlurred,
           isPristine,
+          isDefaultValue,
           isDirty,
         } as FormState<
           TFormData,

packages/form-core/src/metaHelper.ts

@@ -15,6 +15,7 @@ export const defaultFieldMeta: AnyFieldMeta = {
   isDirty: false,
   isPristine: true,
   isValid: true,
+  isDefaultValue: true,
   errors: [],
   errorMap: {},
   errorSourceMap: {},

packages/form-core/tests/FieldApi.spec.ts

@@ -57,6 +57,7 @@ describe('field api', () => {
     expect(field.getMeta()).toEqual({
       isTouched: false,
       isBlurred: false,
+      isDefaultValue: true,
       isValidating: false,
       isPristine: true,
       isValid: true,
@@ -68,7 +69,7 @@ describe('field api', () => {
   })
 
   it('should allow to set default meta', () => {
-    const form = new FormApi()
+    const form = new FormApi({ defaultValues: { name: '' } })
 
     form.mount()
 
@@ -77,27 +78,52 @@ describe('field api', () => {
       name: 'name',
       defaultMeta: {
         isTouched: true,
-        isDirty: true,
-        isPristine: false,
         isBlurred: true,
+        isDirty: true,
       },
     })
 
     field.mount()
 
-    expect(field.getMeta()).toEqual({
+    expect(field.getMeta()).toMatchObject({
       isTouched: true,
       isBlurred: true,
-      isValidating: false,
       isDirty: true,
-      isPristine: false,
+
       isValid: true,
+      isValidating: false,
       errors: [],
       errorMap: {},
       errorSourceMap: {},
     })
   })
 
+  it('should update the fields meta isDefaultValue', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: 'test',
+      },
+    })
+    form.mount()
+
+    const field = new FieldApi({
+      form,
+      name: 'name',
+    })
+
+    field.mount()
+    expect(field.getMeta().isDefaultValue).toBe(true)
+
+    field.setValue('not-test')
+    expect(field.getMeta().isDefaultValue).toBe(false)
+
+    field.setValue('test')
+    expect(field.getMeta().isDefaultValue).toBe(true)
+
+    form.resetField('name')
+    expect(field.getMeta().isDefaultValue).toBe(true)
+  })
+
   it('should set a value correctly', () => {
     const form = new FormApi({
       defaultValues: {
@@ -560,7 +586,7 @@ describe('field api', () => {
 
     field.moveValue(2, 0)
 
-    expect(field.getValue()).toStrictEqual(['three', 'one', 'two', 'four'])
+    expect(field.state.value).toStrictEqual(['three', 'one', 'two', 'four'])
   })
 
   it('should run onChange validation when moving an array fields value', () => {