Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] fix: errors not resetting once values are correct for Zod #1082

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+107 −15
Draft

[WIP] fix: errors not resetting once values are correct for Zod #1082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee9a7e6
fix: errors not resetting once values are correct
Dec 18, 2024
36ca799
ci: apply automated fixes and generate docs
autofix-ci[bot] Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions docs/reference/classes/formapi.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ deleteField<TField>(field): void

#### Defined in

[packages/form-core/src/FormApi.ts:1109](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1109)
[packages/form-core/src/FormApi.ts:1150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1150)

***

Expand Down Expand Up @@ -153,7 +153,7 @@ Gets the field info of the specified field.

#### Defined in

[packages/form-core/src/FormApi.ts:1021](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1021)
[packages/form-core/src/FormApi.ts:1062](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1062)

***

Expand Down Expand Up @@ -181,7 +181,7 @@ Gets the metadata of the specified field.

#### Defined in

[packages/form-core/src/FormApi.ts:1012](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1012)
[packages/form-core/src/FormApi.ts:1053](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1053)

***

Expand Down Expand Up @@ -209,7 +209,7 @@ Gets the value of the specified field.

#### Defined in

[packages/form-core/src/FormApi.ts:1005](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1005)
[packages/form-core/src/FormApi.ts:1046](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1046)

***

Expand All @@ -227,7 +227,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu

#### Defined in

[packages/form-core/src/FormApi.ts:946](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L946)
[packages/form-core/src/FormApi.ts:987](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L987)

***

Expand Down Expand Up @@ -271,7 +271,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ

#### Defined in

[packages/form-core/src/FormApi.ts:1141](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1141)
[packages/form-core/src/FormApi.ts:1182](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1182)

***

Expand Down Expand Up @@ -331,7 +331,7 @@ Moves the value at the first specified index to the second specified index withi

#### Defined in

[packages/form-core/src/FormApi.ts:1259](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1259)
[packages/form-core/src/FormApi.ts:1300](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1300)

***

Expand Down Expand Up @@ -370,7 +370,7 @@ Pushes a value into an array field.

#### Defined in

[packages/form-core/src/FormApi.ts:1123](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1123)
[packages/form-core/src/FormApi.ts:1164](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1164)

***

Expand Down Expand Up @@ -409,7 +409,7 @@ Removes a value from an array field at the specified index.

#### Defined in

[packages/form-core/src/FormApi.ts:1194](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1194)
[packages/form-core/src/FormApi.ts:1235](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1235)

***

Expand Down Expand Up @@ -453,7 +453,7 @@ Replaces a value into 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:1209](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1209)

***

Expand Down Expand Up @@ -514,7 +514,7 @@ resetFieldMeta<TField>(fieldMeta): Record<TField, FieldMeta>

#### Defined in

[packages/form-core/src/FormApi.ts:1055](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1055)
[packages/form-core/src/FormApi.ts:1096](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1096)

***

Expand All @@ -538,7 +538,7 @@ Updates the form's errorMap

#### Defined in

[packages/form-core/src/FormApi.ts:1283](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1283)
[packages/form-core/src/FormApi.ts:1324](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1324)

***

Expand Down Expand Up @@ -570,7 +570,7 @@ Updates the metadata of the specified field.

#### Defined in

[packages/form-core/src/FormApi.ts:1040](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1040)
[packages/form-core/src/FormApi.ts:1081](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1081)

***

Expand Down Expand Up @@ -609,7 +609,7 @@ Sets the value of the specified field and optionally updates the touched state.

#### Defined in

[packages/form-core/src/FormApi.ts:1079](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1079)
[packages/form-core/src/FormApi.ts:1120](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1120)

***

Expand Down Expand Up @@ -653,7 +653,7 @@ Swaps the values at the specified indices within an array field.

#### 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:1274](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1274)

***

Expand Down
41 changes: 41 additions & 0 deletions packages/form-core/src/FormApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -747,6 +747,26 @@ export class FormApi<
}))
}
}
} else {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here the form validator should clear the field errors only if the validator is one that returns the object version of FormValidationError.
This means you should go with else if (isFormValidationError(rawError)).

However, when the form has no errors the adapters are returning undefined. With this information alone you don't know if it was a form object validator or a simple validator returning a string, as in that case you shouldn't clear fields (the new failing tests you're getting) but only the form error.

The first approach that comes to my mind is to slightly refactor the adapters and make them return something instead of undefined. It could be { fields: {} }

With this information you know that the form validator returned no errors and you should clear the fields.

Note: this might break the initial if (fieldErrors) but something like if (Object.values(fieldErrors).length) should do the trick.

for (const [field] of Object.entries(this.fieldInfo)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tiny thing, Object.keys might be enough here

this.setFieldMeta(field as DeepKeys<TFormData>, (prev) => {
const newErrorMap = prev.errorMap

if (prev.isDirty) {
for (const [errorKey] of Object.entries(prev.errorMap)) {
newErrorMap[errorKey as ValidationErrorMapKeys] = undefined
}
}
Comment on lines +753 to +759
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are those lines still needed or were they left by some other attempts?


return {
...prev,
errorMap: {
...prev.errorMap,
[errorMapKey]: undefined,
},
}
})
}
}

if (this.state.errorMap[errorMapKey] !== formError) {
Expand Down Expand Up @@ -875,7 +895,28 @@ export class FormApi<
}))
}
}
} else {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comments for sync also apply here, but let's make sync work first, then we'll replicate in the async :)

for (const [field] of Object.entries(this.fieldInfo)) {
this.setFieldMeta(field as DeepKeys<TFormData>, (prev) => {
const newErrorMap = prev.errorMap

if (prev.isDirty) {
for (const [errorKey] of Object.entries(prev.errorMap)) {
newErrorMap[errorKey as ValidationErrorMapKeys] = undefined
}
}

return {
...prev,
errorMap: {
...prev.errorMap,
[errorMapKey]: undefined,
},
}
})
}
}

this.store.setState((prev) => ({
...prev,
errorMap: {
Expand Down
51 changes: 51 additions & 0 deletions packages/zod-form-adapter/tests/FormApi.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,4 +184,55 @@ describe('zod form api', () => {
name0Field.setValue('qwer')
expect(name0Field.getMeta().errors).toEqual([])
})

it('should clear errors if previously errors were set and now are fixed', () => {
const form = new FormApi({
defaultValues: {
password: '',
confirmPassword: '',
},
validatorAdapter: zodValidator(),
validators: {
onChange: z
.object({
password: z.string(),
confirmPassword: z.string(),
})
.refine(
({ password, confirmPassword }) => password === confirmPassword,
{
message: 'Passwords must match',
path: ['password'],
},
),
},
})
form.mount()

const field1 = new FieldApi({
form,
name: 'password',
defaultMeta: {
isTouched: true,
},
})
field1.mount()

const field2 = new FieldApi({
form,
name: 'confirmPassword',
defaultMeta: {
isTouched: true,
},
})
field2.mount()

field1.setValue('password')
expect(field1.getMeta().errors).toStrictEqual(['Passwords must match'])
expect(form.state.canSubmit).toBe(false)

field2.setValue('password')
expect(field2.getMeta().errors).toStrictEqual([])
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is always going to be empty, you should check for field1 errors

expect(form.state.canSubmit).toBe(true)
})
})
Loading