diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md index be77a75c5..4b06bdeef 100644 --- a/docs/reference/classes/fieldapi.md +++ b/docs/reference/classes/fieldapi.md @@ -213,7 +213,7 @@ Use `field.state.value` instead. handleBlur(): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1593](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1593) +Defined in: [packages/form-core/src/FieldApi.ts:1632](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1632) Handles the blur event. @@ -229,7 +229,7 @@ Handles the blur event. handleChange(updater): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1586](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1586) +Defined in: [packages/form-core/src/FieldApi.ts:1625](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1625) Handles the change event. @@ -251,10 +251,10 @@ Handles the change event. insertValue( index, value, -opts?): Promise + opts?): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1234](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1234) +Defined in: [packages/form-core/src/FieldApi.ts:1241](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1241) Inserts a value at the specified index, shifting the subsequent values to the right. @@ -274,7 +274,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri #### Returns -`Promise`\<`void`\> +`void` *** @@ -307,7 +307,7 @@ moveValue( opts?): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1264](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1264) +Defined in: [packages/form-core/src/FieldApi.ts:1297](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1297) Moves the value at the first specified index to the second specified index. @@ -360,10 +360,10 @@ Pushes a new value to the field. ### removeValue() ```ts -removeValue(index, opts?): Promise +removeValue(index, opts?): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1252](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1252) +Defined in: [packages/form-core/src/FieldApi.ts:1273](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1273) Removes a value at the specified index. @@ -379,7 +379,7 @@ Removes a value at the specified index. #### Returns -`Promise`\<`void`\> +`void` *** @@ -389,10 +389,10 @@ Removes a value at the specified index. replaceValue( index, value, -opts?): Promise + opts?): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1243](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1243) +Defined in: [packages/form-core/src/FieldApi.ts:1257](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1257) Replaces a value at the specified index. @@ -412,7 +412,7 @@ Replaces a value at the specified index. #### Returns -`Promise`\<`void`\> +`void` *** @@ -422,7 +422,7 @@ Replaces a value at the specified index. setErrorMap(errorMap): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1613](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1613) +Defined in: [packages/form-core/src/FieldApi.ts:1652](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1652) Updates the field's errorMap @@ -495,7 +495,7 @@ swapValues( opts?): void ``` -Defined in: [packages/form-core/src/FieldApi.ts:1258](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1258) +Defined in: [packages/form-core/src/FieldApi.ts:1285](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1285) Swaps the values at the specified indices. @@ -547,7 +547,7 @@ Updates the field instance with new options. validate(cause, opts?): unknown[] | Promise ``` -Defined in: [packages/form-core/src/FieldApi.ts:1553](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1553) +Defined in: [packages/form-core/src/FieldApi.ts:1592](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1592) Validates the field value. diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index 91468d56f..3013e7aaa 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -1226,7 +1226,14 @@ export class FieldApi< pushValue = ( value: TData extends any[] ? TData[number] : never, opts?: UpdateMetaOptions, - ) => this.form.pushFieldValue(this.name, value as any, opts) + ) => { + this.form.pushFieldValue(this.name, value as any, opts) + + this.options.listeners?.onChange?.({ + value: this.state.value, + fieldApi: this, + }) + } /** * Inserts a value at the specified index, shifting the subsequent values to the right. @@ -1235,7 +1242,14 @@ export class FieldApi< index: number, value: TData extends any[] ? TData[number] : never, opts?: UpdateMetaOptions, - ) => this.form.insertFieldValue(this.name, index, value as any, opts) + ) => { + this.form.insertFieldValue(this.name, index, value as any, opts) + + this.options.listeners?.onChange?.({ + value: this.state.value, + fieldApi: this, + }) + } /** * Replaces a value at the specified index. @@ -1244,26 +1258,51 @@ export class FieldApi< index: number, value: TData extends any[] ? TData[number] : never, opts?: UpdateMetaOptions, - ) => this.form.replaceFieldValue(this.name, index, value as any, opts) + ) => { + this.form.replaceFieldValue(this.name, index, value as any, opts) + + this.options.listeners?.onChange?.({ + value: this.state.value, + fieldApi: this, + }) + } /** * Removes a value at the specified index. */ - removeValue = (index: number, opts?: UpdateMetaOptions) => + removeValue = (index: number, opts?: UpdateMetaOptions) => { this.form.removeFieldValue(this.name, index, opts) + this.options.listeners?.onChange?.({ + value: this.state.value, + fieldApi: this, + }) + } + /** * Swaps the values at the specified indices. */ - swapValues = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) => + swapValues = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) => { this.form.swapFieldValues(this.name, aIndex, bIndex, opts) + this.options.listeners?.onChange?.({ + value: this.state.value, + fieldApi: this, + }) + } + /** * Moves the value at the first specified index to the second specified index. */ - moveValue = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) => + moveValue = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) => { this.form.moveFieldValues(this.name, aIndex, bIndex, opts) + this.options.listeners?.onChange?.({ + value: this.state.value, + fieldApi: this, + }) + } + /** * @private */ diff --git a/packages/form-core/tests/FieldApi.spec.ts b/packages/form-core/tests/FieldApi.spec.ts index 7365852e2..8175718f4 100644 --- a/packages/form-core/tests/FieldApi.spec.ts +++ b/packages/form-core/tests/FieldApi.spec.ts @@ -1156,6 +1156,46 @@ describe('field api', () => { expect(form.getFieldValue('greet')).toStrictEqual('hello baz') }) + it('should run the onChange listener when the field array is changed', () => { + const form = new FormApi({ + defaultValues: { + items: ['one', 'two'], + }, + }) + form.mount() + + let arr!: string[] + + const field = new FieldApi({ + form, + name: 'items', + listeners: { + onChange: ({ value }) => { + arr = value + }, + }, + }) + field.mount() + + field.removeValue(1) + expect(arr).toStrictEqual(['one']) + + field.replaceValue(0, 'start') + expect(arr).toStrictEqual(['start']) + + field.pushValue('end') + expect(arr).toStrictEqual(['start', 'end']) + + field.insertValue(1, 'middle') + expect(arr).toStrictEqual(['start', 'middle', 'end']) + + field.swapValues(0, 2) + expect(arr).toStrictEqual(['end', 'middle', 'start']) + + field.moveValue(0, 1) + expect(arr).toStrictEqual(['middle', 'end', 'start']) + }) + it('should reset the form on a listener', () => { const form = new FormApi({ defaultValues: {