From e1e8abab1329d54d603e4e8cfd59b595f4fb96d9 Mon Sep 17 00:00:00 2001 From: aadito123 Date: Tue, 31 Oct 2023 18:17:57 +0800 Subject: [PATCH] onChange + onBlur --- packages/form-core/src/FieldApi.ts | 10 +- packages/form-core/src/FormApi.ts | 209 ++++++- packages/form-core/src/tests/FormApi.spec.ts | 614 ++++++++++--------- 3 files changed, 494 insertions(+), 339 deletions(-) diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index aac2d3c38..ad1b74257 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -1,7 +1,7 @@ -import { type DeepKeys, type DeepValue, type Updater } from './utils' -import type { FormApi, ValidationErrorMap } from './FormApi' import { Store } from '@tanstack/store' -import type { Validator, ValidationError } from './types' +import type { FormApi, ValidationErrorMap } from './FormApi' +import type { ValidationError, Validator } from './types' +import type { DeepKeys, DeepValue, Updater } from './utils' export type ValidationCause = 'change' | 'blur' | 'submit' | 'mount' @@ -504,6 +504,10 @@ export class FieldApi< // If the field is pristine and validatePristine is false, do not validate if (!this.state.meta.isTouched) return [] + try { + this.form.validate(cause) + } catch (_) {} + // Store the previous error for the errorMapKey (eg. onChange, onBlur, onSubmit) const errorMapKey = getErrorMapKey(cause) const prevError = this.getMeta().errorMap[errorMapKey] diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 385d1fa75..6a92e70c2 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -21,12 +21,9 @@ type ValidateAsyncFn = ( export type FormOptions = { defaultValues?: TData defaultState?: Partial> + asyncAlways?: boolean asyncDebounceMs?: number validator?: ValidatorType - validateFn?: ( - values: TData, - formApi: FormApi, - ) => Promise | ValidationError[] | void onMount?: ValidateOrFn onMountAsync?: ValidateAsyncFn onMountAsyncDebounceMs?: number @@ -70,7 +67,8 @@ export type FormState = { isFormValidating: boolean formValidationCount: number isFormValid: boolean - formError?: ValidationError + errors: ValidationError[] + errorMap: ValidationErrorMap // Fields fieldMeta: Record, FieldMeta> isFieldsValidating: boolean @@ -90,6 +88,8 @@ function getDefaultFormState( ): FormState { return { values: defaultState.values ?? ({} as never), + errors: defaultState.errors ?? [], + errorMap: defaultState.errorMap ?? {}, fieldMeta: defaultState.fieldMeta ?? ({} as never), canSubmit: defaultState.canSubmit ?? true, isFieldsValid: defaultState.isFieldsValid ?? false, @@ -147,7 +147,10 @@ export class FormApi { const isTouched = fieldMetaValues.some((field) => field?.isTouched) const isValidating = isFieldsValidating || state.isFormValidating - const isFormValid = !state.formError + state.errors = Object.values(state.errorMap).filter( + (val: unknown) => val !== undefined, + ) + const isFormValid = state.errors.length === 0 const isValid = isFieldsValid && isFormValid const canSubmit = (state.submissionAttempts === 0 && !isTouched) || @@ -239,26 +242,96 @@ export class FormApi { return Promise.all(fieldValidationPromises) } - validateForm = async () => { - const { validateFn } = this.options + validateSync = (cause: ValidationCause): void => { + const { onChange, onBlur } = this.options + const validate = + cause === 'change' ? onChange : cause === 'blur' ? onBlur : undefined + if (!validate) return - if (!validateFn) { - return + const errorMapKey = getErrorMapKey(cause) + const doValidate = () => { + if (typeof validate === 'function') { + return validate(this.state.values, this) as ValidationError + } + if (this.options.validator && typeof validate !== 'function') { + return (this.options.validator as Validator)().validate( + this.state.values, + validate, + ) + } + throw new Error( + `Form validation for ${errorMapKey} failed. ${errorMapKey} should either be a function, or \`validator\` should be correct.`, + ) } - // Use the formValidationCount for all field instances to - // track freshness of the validation + const error = normalizeError(doValidate()) + if (this.state.errorMap[errorMapKey] !== error) { + this.store.setState((prev) => ({ + ...prev, + errorMap: { + ...prev.errorMap, + [errorMapKey]: error, + }, + })) + } + + if (this.state.errorMap[errorMapKey]) { + this.cancelValidateAsync() + } + } + + __leaseValidateAsync = () => { + const count = (this.validationMeta.validationAsyncCount || 0) + 1 + this.validationMeta.validationAsyncCount = count + return count + } + + cancelValidateAsync = () => { + // Lease a new validation count to ignore any pending validations + this.__leaseValidateAsync() + //??=0) Cancel any pending validation state this.store.setState((prev) => ({ ...prev, - isValidating: true, - isFormValidating: true, - formValidationCount: prev.formValidationCount + 1, + isFormValidating: false, })) + } - const formValidationCount = this.state.formValidationCount + validateAsync = async ( + cause: ValidationCause, + ): Promise => { + console.log('validateAsync') + const { + onChangeAsync, + onBlurAsync, + asyncDebounceMs, + onBlurAsyncDebounceMs, + onChangeAsyncDebounceMs, + } = this.options + + const validate = + cause === 'change' + ? onChangeAsync + : cause === 'blur' + ? onBlurAsync + : undefined + + if (!validate) return [] + const debounceMs = + (cause === 'change' ? onChangeAsyncDebounceMs : onBlurAsyncDebounceMs) ?? + asyncDebounceMs ?? + 0 + + if (!this.state.isFormValidating) { + console.log('isFormValidating true') + this.store.setState((prev) => ({ ...prev, isFormValidating: true })) + } + + // Use the validationCount for all field instances to + // track freshness of the validation + const validationAsyncCount = this.__leaseValidateAsync() const checkLatest = () => - formValidationCount === this.state.formValidationCount + validationAsyncCount === this.state.formValidationCount if (!this.validationMeta.validationPromise) { this.validationMeta.validationPromise = new Promise((resolve, reject) => { @@ -267,34 +340,79 @@ export class FormApi { }) } - const doValidation = async () => { + if (debounceMs > 0) { + await new Promise((r) => setTimeout(r, debounceMs)) + } + + const doValidate = () => { + if (typeof validate === 'function') { + return validate(this.state.values, this) as ValidationError + } + if (this.options.validator && typeof validate !== 'function') { + return (this.options.validator as Validator)().validateAsync( + this.state.values, + validate, + ) + } + const errorMapKey = getErrorMapKey(cause) + throw new Error( + `Form validation for ${errorMapKey}Async failed. ${errorMapKey}Async should either be a function, or \`validator\` should be correct.`, + ) + } + + // Only kick off validation if this validation is the latest attempt + if (checkLatest()) { + const prevErrors = this.state.errors try { - const error = await validateFn(this.state.values, this) - console.log('Error: ', error) + const rawError = await doValidate() if (checkLatest()) { + const error = normalizeError(rawError) this.store.setState((prev) => ({ ...prev, - isValidating: false, isFormValidating: false, - formError: error ? 'Invalid Form Values' : false, + errorMap: { + ...prev.errorMap, + [getErrorMapKey(cause)]: error, + }, })) - - this.validationMeta.validationResolve?.( - error as ValidationError[] | undefined, - ) + this.validationMeta.validationResolve?.([...prevErrors, error]) } - } catch (err) { + } catch (error) { if (checkLatest()) { - this.validationMeta.validationReject?.(err) + this.validationMeta.validationReject?.([...prevErrors, error]) + throw error } } finally { - delete this.validationMeta.validationPromise + if (checkLatest()) { + this.store.setState((prev) => ({ ...prev, isFormValidating: false })) + delete this.validationMeta.validationPromise + } } } + // Always return the latest validation promise to the caller + return (await this.validationMeta.validationPromise) ?? [] + } - doValidation() + validate = ( + cause: ValidationCause, + ): ValidationError[] | Promise => { + // Store the previous error for the errorMapKey (eg. onChange, onBlur, onSubmit) + const errorMapKey = getErrorMapKey(cause) + const prevError = this.state.errorMap[errorMapKey] + + // Attempt to sync validate first + this.validateSync(cause) + + const newError = this.state.errorMap[errorMapKey] + if ( + prevError !== newError && + !this.options.asyncAlways && + !(newError === undefined && prevError !== undefined) + ) + return this.state.errors - return this.validationMeta.validationPromise + // No error? Attempt async validation + return this.validateAsync(cause) } handleSubmit = async () => { @@ -331,7 +449,7 @@ export class FormApi { } // Run validation for the form - await this.validateForm() + await this.validate('submit') if (!this.state.isValid) { done() @@ -408,8 +526,6 @@ export class FormApi { values: setBy(prev.values, field, updater), } }) - - this.validateForm() }) } @@ -479,3 +595,28 @@ export class FormApi { }) } } + +function normalizeError(rawError?: ValidationError) { + if (rawError) { + if (typeof rawError !== 'string') { + return 'Invalid Form Values' + } + + return rawError + } + + return undefined +} + +function getErrorMapKey(cause: ValidationCause) { + switch (cause) { + case 'submit': + return 'onSubmit' + case 'change': + return 'onChange' + case 'blur': + return 'onBlur' + case 'mount': + return 'onMount' + } +} diff --git a/packages/form-core/src/tests/FormApi.spec.ts b/packages/form-core/src/tests/FormApi.spec.ts index a6cfd05ac..8696e3601 100644 --- a/packages/form-core/src/tests/FormApi.spec.ts +++ b/packages/form-core/src/tests/FormApi.spec.ts @@ -5,326 +5,339 @@ import { FieldApi } from '../FieldApi' import { sleep } from './utils' describe('form api', () => { - it('should get default form state', () => { - const form = new FormApi() - - expect(form.state).toEqual({ - values: {}, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isValid: true, - isValidating: false, - submissionAttempts: 0, - formValidationCount: 0, - }) - }) + // it('should get default form state', () => { + // const form = new FormApi() + + // expect(form.state).toEqual({ + // values: {}, + // fieldMeta: {}, + // canSubmit: true, + // isFieldsValid: true, + // isFieldsValidating: false, + // isFormValid: true, + // isFormValidating: false, + // isSubmitted: false, + // errors: [], + // errorMap: {}, + // isSubmitting: false, + // isTouched: false, + // isValid: true, + // isValidating: false, + // submissionAttempts: 0, + // formValidationCount: 0, + // }) + // }) + + // it('should get default form state when default values are passed', () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'test', + // }, + // }) + + // expect(form.state).toEqual({ + // values: { + // name: 'test', + // }, + // fieldMeta: {}, + // canSubmit: true, + // isFieldsValid: true, + // errors: [], + // errorMap: {}, + // isFieldsValidating: false, + // isFormValid: true, + // isFormValidating: false, + // isSubmitted: false, + // isSubmitting: false, + // isTouched: false, + // isValid: true, + // isValidating: false, + // submissionAttempts: 0, + // formValidationCount: 0, + // }) + // }) + + // it('should get default form state when default state is passed', () => { + // const form = new FormApi({ + // defaultState: { + // submissionAttempts: 30, + // }, + // }) + + // expect(form.state).toEqual({ + // values: {}, + // fieldMeta: {}, + // errors: [], + // errorMap: {}, + // canSubmit: true, + // isFieldsValid: true, + // isFieldsValidating: false, + // isFormValid: true, + // isFormValidating: false, + // isSubmitted: false, + // isSubmitting: false, + // isTouched: false, + // isValid: true, + // isValidating: false, + // submissionAttempts: 30, + // formValidationCount: 0, + // }) + // }) + + // it('should handle updating form state', () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'test', + // }, + // }) + + // form.update({ + // defaultValues: { + // name: 'other', + // }, + // defaultState: { + // submissionAttempts: 300, + // }, + // }) + + // expect(form.state).toEqual({ + // values: { + // name: 'other', + // }, + // errors: [], + // errorMap: {}, + // fieldMeta: {}, + // canSubmit: true, + // isFieldsValid: true, + // isFieldsValidating: false, + // isFormValid: true, + // isFormValidating: false, + // isSubmitted: false, + // isSubmitting: false, + // isTouched: false, + // isValid: true, + // isValidating: false, + // submissionAttempts: 300, + // formValidationCount: 0, + // }) + // }) + + // it('should reset the form state properly', () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'test', + // }, + // }) + + // form.setFieldValue('name', 'other') + // form.state.submissionAttempts = 300 + + // form.reset() + + // expect(form.state).toEqual({ + // values: { + // name: 'test', + // }, + // errors: [], + // errorMap: {}, + // fieldMeta: {}, + // canSubmit: true, + // isFieldsValid: true, + // isFieldsValidating: false, + // isFormValid: true, + // isFormValidating: false, + // isSubmitted: false, + // isSubmitting: false, + // isTouched: false, + // isValid: true, + // isValidating: false, + // submissionAttempts: 0, + // formValidationCount: 0, + // }) + // }) + + // it("should get a field's value", () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'test', + // }, + // }) + + // expect(form.getFieldValue('name')).toEqual('test') + // }) + + // it("should set a field's value", () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'test', + // }, + // }) + + // form.setFieldValue('name', 'other') + + // expect(form.getFieldValue('name')).toEqual('other') + // }) + + // it("should push an array field's value", () => { + // const form = new FormApi({ + // defaultValues: { + // names: ['test'], + // }, + // }) + + // form.pushFieldValue('names', 'other') + + // expect(form.getFieldValue('names')).toStrictEqual(['test', 'other']) + // }) + + // it("should insert an array field's value", () => { + // const form = new FormApi({ + // defaultValues: { + // names: ['one', 'two', 'three'], + // }, + // }) + + // form.insertFieldValue('names', 1, 'other') + + // expect(form.getFieldValue('names')).toStrictEqual(['one', 'other', 'three']) + // }) + + // it("should remove an array field's value", () => { + // const form = new FormApi({ + // defaultValues: { + // names: ['one', 'two', 'three'], + // }, + // }) + + // form.removeFieldValue('names', 1) + + // expect(form.getFieldValue('names')).toStrictEqual(['one', 'three']) + // }) + + // it("should swap an array field's value", () => { + // const form = new FormApi({ + // defaultValues: { + // names: ['one', 'two', 'three'], + // }, + // }) + + // form.swapFieldValues('names', 1, 2) + + // expect(form.getFieldValue('names')).toStrictEqual(['one', 'three', 'two']) + // }) + + // it('should not wipe values when updating', () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'test', + // }, + // }) + + // form.setFieldValue('name', 'other') + + // expect(form.getFieldValue('name')).toEqual('other') + + // form.update() + + // expect(form.getFieldValue('name')).toEqual('other') + // }) + + // it('should wipe default values when not touched', () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'test', + // }, + // }) - it('should get default form state when default values are passed', () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) + // expect(form.getFieldValue('name')).toEqual('test') - expect(form.state).toEqual({ - values: { - name: 'test', - }, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isValid: true, - isValidating: false, - submissionAttempts: 0, - formValidationCount: 0, - }) - }) + // form.update({ + // defaultValues: { + // name: 'other', + // }, + // }) - it('should get default form state when default state is passed', () => { - const form = new FormApi({ - defaultState: { - submissionAttempts: 30, - }, - }) + // expect(form.getFieldValue('name')).toEqual('other') + // }) - expect(form.state).toEqual({ - values: {}, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isValid: true, - isValidating: false, - submissionAttempts: 30, - formValidationCount: 0, - }) - }) + // it('should not wipe default values when touched', () => { + // const form = new FormApi({ + // defaultValues: { + // name: 'one', + // }, + // }) - it('should handle updating form state', () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) + // expect(form.getFieldValue('name')).toEqual('one') - form.update({ - defaultValues: { - name: 'other', - }, - defaultState: { - submissionAttempts: 300, - }, - }) + // form.setFieldValue('name', 'two', { touch: true }) - expect(form.state).toEqual({ - values: { - name: 'other', - }, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isValid: true, - isValidating: false, - submissionAttempts: 300, - formValidationCount: 0, - }) - }) + // form.update({ + // defaultValues: { + // name: 'three', + // }, + // }) - it('should reset the form state properly', () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) + // expect(form.getFieldValue('name')).toEqual('two') + // }) - form.setFieldValue('name', 'other') - form.state.submissionAttempts = 300 + // it('should delete field from the form', () => { + // const form = new FormApi({ + // defaultValues: { + // names: 'kittu', + // age: 4, + // }, + // }) - form.reset() + // form.deleteField('names') - expect(form.state).toEqual({ - values: { - name: 'test', - }, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isValid: true, - isValidating: false, - submissionAttempts: 0, - formValidationCount: 0, - }) - }) + // expect(form.getFieldValue('age')).toStrictEqual(4) + // expect(form.getFieldValue('names')).toStrictEqual(undefined) + // expect(form.getFieldMeta('names')).toStrictEqual(undefined) + // }) - it("should get a field's value", () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) + // it("form's valid state should be work fine", () => { + // const form = new FormApi({ + // defaultValues: { + // name: '', + // }, + // }) - expect(form.getFieldValue('name')).toEqual('test') - }) + // const field = new FieldApi({ + // form, + // name: 'name', + // onChange: (v) => (v.length > 0 ? undefined : 'required'), + // }) - it("should set a field's value", () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) + // field.mount() - form.setFieldValue('name', 'other') - - expect(form.getFieldValue('name')).toEqual('other') - }) - - it("should push an array field's value", () => { - const form = new FormApi({ - defaultValues: { - names: ['test'], - }, - }) + // field.handleChange('one') - form.pushFieldValue('names', 'other') + // expect(form.state.isFieldsValid).toEqual(true) + // expect(form.state.canSubmit).toEqual(true) - expect(form.getFieldValue('names')).toStrictEqual(['test', 'other']) - }) + // field.handleChange('') - it("should insert an array field's value", () => { - const form = new FormApi({ - defaultValues: { - names: ['one', 'two', 'three'], - }, - }) + // expect(form.state.isFieldsValid).toEqual(false) + // expect(form.state.canSubmit).toEqual(false) - form.insertFieldValue('names', 1, 'other') + // field.handleChange('two') - expect(form.getFieldValue('names')).toStrictEqual(['one', 'other', 'three']) - }) - - it("should remove an array field's value", () => { - const form = new FormApi({ - defaultValues: { - names: ['one', 'two', 'three'], - }, - }) - - form.removeFieldValue('names', 1) - - expect(form.getFieldValue('names')).toStrictEqual(['one', 'three']) - }) - - it("should swap an array field's value", () => { - const form = new FormApi({ - defaultValues: { - names: ['one', 'two', 'three'], - }, - }) - - form.swapFieldValues('names', 1, 2) - - expect(form.getFieldValue('names')).toStrictEqual(['one', 'three', 'two']) - }) - - it('should not wipe values when updating', () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) - - form.setFieldValue('name', 'other') - - expect(form.getFieldValue('name')).toEqual('other') - - form.update() - - expect(form.getFieldValue('name')).toEqual('other') - }) - - it('should wipe default values when not touched', () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) - - expect(form.getFieldValue('name')).toEqual('test') - - form.update({ - defaultValues: { - name: 'other', - }, - }) - - expect(form.getFieldValue('name')).toEqual('other') - }) - - it('should not wipe default values when touched', () => { - const form = new FormApi({ - defaultValues: { - name: 'one', - }, - }) - - expect(form.getFieldValue('name')).toEqual('one') - - form.setFieldValue('name', 'two', { touch: true }) - - form.update({ - defaultValues: { - name: 'three', - }, - }) - - expect(form.getFieldValue('name')).toEqual('two') - }) - - it('should delete field from the form', () => { - const form = new FormApi({ - defaultValues: { - names: 'kittu', - age: 4, - }, - }) - - form.deleteField('names') - - expect(form.getFieldValue('age')).toStrictEqual(4) - expect(form.getFieldValue('names')).toStrictEqual(undefined) - expect(form.getFieldMeta('names')).toStrictEqual(undefined) - }) - - it("form's valid state should be work fine", () => { - const form = new FormApi({ - defaultValues: { - name: '', - }, - }) - - const field = new FieldApi({ - form, - name: 'name', - onChange: (v) => (v.length > 0 ? undefined : 'required'), - }) - - field.mount() - - field.handleChange('one') - - expect(form.state.isFieldsValid).toEqual(true) - expect(form.state.canSubmit).toEqual(true) - - field.handleChange('') - - expect(form.state.isFieldsValid).toEqual(false) - expect(form.state.canSubmit).toEqual(false) - - field.handleChange('two') - - expect(form.state.isFieldsValid).toEqual(true) - expect(form.state.canSubmit).toEqual(true) - }) + // expect(form.state.isFieldsValid).toEqual(true) + // expect(form.state.canSubmit).toEqual(true) + // }) it('form validation should update states', async () => { const form = new FormApi({ defaultValues: { name: '', }, - async validateFn(values) { + onChange: (v) => { + return v.name.length > 2 ? undefined : 'Invalid length' + }, + async onChangeAsync(values) { await sleep(10) - console.log('Values: ', values) - return values.name.length > 0 ? undefined : ['required'] + if (values.name.length === 3) return 'Async invalid length' + return }, }) @@ -335,22 +348,19 @@ describe('form api', () => { field.mount() - field.handleChange('') - await sleep(10) - + field.handleChange('a') expect(form.state.isFormValidating).toBe(false) expect(form.state.isFormValid).toBe(false) expect(form.state.isValid).toBe(false) expect(form.state.canSubmit).toBe(false) field.handleChange('ayo') - await sleep(1) + console.log('hey') expect(form.state.isFormValidating).toBe(true) - await sleep(9) - + await sleep(10) expect(form.state.isFormValidating).toBe(false) - expect(form.state.isFormValid).toBe(true) - expect(form.state.isValid).toBe(true) - expect(form.state.canSubmit).toBe(true) + expect(form.state.isFormValid).toBe(false) + expect(form.state.isValid).toBe(false) + expect(form.state.canSubmit).toBe(false) }) })