add onChange method (#37)

* add onChange method

* change model to form type

* add tests for onChange method

Readme.md

@@ -721,9 +721,10 @@ return (
 | Property      | Details                                                                                                          |
 | ------------- | ---------------------------------------------------------------------------------------------------------------- |
 | model         | Your form model, it should be an object (can be empty). Every property will be mapped into a field.              |
+| validations   | A validations object.                                                                                            |
 | onSubmit      | Your custom submit function. It will be parsed internally and provide a onSubmit handler to call programaticaly. |
 | onSubmitError | A useful handler to deal with errors.                                                                            |
-| validations   | A validations object.                                                                                            |
+| onChange      | A handler for changes in all form fields.                                                                        |
 
 <p>&nbsp</p>
 
@@ -818,7 +819,7 @@ Releases are done via GitHub Releases. Create a new release there, this will aut
 
 ### Sandbox App
 
-There is a also a sandbox basic application to play around with the library. Use `yarn dev` to start up the parcel server, and you can find the files inside the `/sandbox-app` folder.
+There is a also a sandbox basic application to play around with the library. Use `yarn start` to start up the parcel server, and you can find the files inside the `/sandbox-app` folder.
 
 #### Troubleshoot
 

package.json

@@ -25,7 +25,8 @@
   },
   "contributors": [
     "Leo Gonzalez",
-    "Jens Ravens"
+    "Jens Ravens",
+    "Geraldine Atayan"
   ],
   "license": "MIT",
   "devDependencies": {

sandbox-app/simple-object.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useForm } from '../src';
-import { Input } from './components/Input';
 
 interface Model {
   simpleObject?: {
@@ -27,6 +26,10 @@ export function SimpleObject(): JSX.Element {
       // eslint-disable-next-line no-console
       console.log(model);
     },
+    onChange: ({ model }) => {
+      // eslint-disable-next-line no-console
+      console.log(model);
+    },
   });
 
   return (

src/form.spec.ts

@@ -54,20 +54,23 @@ function createForm({
   onSubmit,
   onSubmitError,
   onInit,
+  onChange,
 }: {
   value?: Partial<Model>;
   validations?: Partial<MappedValidation<Model>>;
   onSubmit?: (form: Form<Model>) => Promise<void> | void;
   onSubmitError?: (error: Error) => void;
   onInit?: (form: Form<Model>) => void;
+  onChange?: (form: Form<Model>) => void;
 } = {}): Form<Model> {
   return new Form<Model>({
     model: { ...defaultValue, ...(value || {}) },
+    validations,
     onUpdate: tracker.onUpdate,
     onSubmit: onSubmit ?? tracker.onSubmit,
     onSubmitError,
     onInit,
-    validations,
+    onChange,
   });
 }
 
@@ -826,4 +829,28 @@ describe(Form, () => {
       expect(form.fields.address.dirty).toBeTruthy();
     });
   });
+
+  describe('change handler', () => {
+    it('invokes the onChange callback when a field changes value', () => {
+      const initializeAppSpy = jest.fn();
+      const form = createForm({
+        onChange: initializeAppSpy,
+      });
+      form.fields.name.onChange('Freddy');
+      form.fields.age.onChange(27);
+      expect(initializeAppSpy).toHaveBeenCalledTimes(2);
+    });
+
+    it('passes the form values on the onChange method', () => {
+      let storedFormValues = null;
+      const form = createForm({
+        onChange: (form) => {
+          storedFormValues = form;
+        },
+      });
+      form.fields.name.onChange('George');
+      form.fields.age.onChange(30);
+      expect(storedFormValues).toEqual(form);
+    });
+  });
 });

src/form.ts

@@ -9,8 +9,9 @@ export class Form<T> {
   onSubmit?: (form: Form<T>) => void | Promise<void>;
   onSubmitError: ((error: Error) => void) | undefined;
   #validations: MappedValidation<T>;
-  #onUpdate?: () => void;
   #field: FieldImplementation<T, T>;
+  #onChange?: (form: Form<T>) => void;
+  #onUpdate?: () => void;
 
   constructor({
     model,
@@ -19,13 +20,15 @@ export class Form<T> {
     onSubmit,
     onSubmitError,
     onInit,
+    onChange,
   }: {
     model: T;
     validations?: MappedValidation<T>;
     onUpdate?: () => void;
     onSubmit?: (form: Form<T>) => void | Promise<void>;
     onSubmitError?: (error: Error) => void;
     onInit?: (form: Form<T>) => void;
+    onChange?: (form: Form<T>) => void;
   }) {
     this.#validations = validations ?? {};
     this.#field = new FieldImplementation<T, T>({
@@ -40,6 +43,7 @@ export class Form<T> {
     this.#onUpdate = onUpdate;
     this.onSubmit = onSubmit;
     this.onSubmitError = onSubmitError;
+    this.#onChange = onChange;
   }
 
   // This method will touch every field, for the purpose of displaying the errors in the view
@@ -149,6 +153,7 @@ export class Form<T> {
     ) {
       this.submissionStatus = 'idle';
     }
+    this.#onChange?.(this);
     this.#onUpdate?.();
   }
 }

src/hooks.ts

@@ -11,6 +11,7 @@ export interface UseFormProps<T> {
   onSubmit?: (form: Form<T>) => void | Promise<void>;
   onSubmitError?: (error: Error) => void;
   onInit?: (form: Form<T>) => void;
+  onChange?: (form: Form<T>) => void;
 }
 
 // This interface is what you get back from the useForm hook
@@ -36,18 +37,20 @@ export function useForm<T>({
   onSubmitError,
   validations,
   onInit,
+  onChange,
   _unstableUpdateModelOnChange,
 }: UseFormProps<T>): FormModel<T> {
   // Using a custom hook to call a rerender on every change
   const onUpdate = useForceUpdate();
   const formRef = useRef<Form<T>>(
     new Form({
       model,
-      onUpdate,
       validations,
+      onUpdate,
       onSubmit,
       onSubmitError,
       onInit,
+      onChange,
     })
   );
   const form = formRef.current;