call on update only if instanced

sandbox-app/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { useForm } from '../src/index';
 import { NestedField } from './nested-field';
+import { NestedValidation } from './nested-validation';
 import { NullableField } from './nullable-field';
 import { ObjectsArray } from './objects-array';
 import { SimpleArray } from './simple-array';
@@ -39,6 +40,7 @@ function App(): JSX.Element {
         <NestedField />
         <NullableField />
         <SimpleObject />
+        <NestedValidation />
       </div>
     </>
   );

sandbox-app/nested-validation.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useForm } from '../src';
+import { Input } from './components/Input';
+
+interface Model {
+  address?: {
+    streetName?: string;
+  };
+}
+
+const initialValue: Model = {};
+
+export function NestedValidation(): JSX.Element {
+  const {
+    model,
+    changes,
+    fields,
+    onSubmit,
+    valid,
+    dirty,
+    submissionStatus,
+    reset,
+  } = useForm({
+    model: initialValue,
+    onSubmit: async ({ model }) => {
+      // eslint-disable-next-line no-console
+      console.log(model);
+    },
+    validations: {
+      address: {
+        streetName: 'required',
+      },
+    },
+  });
+
+  return (
+    <>
+      <h2 id="nested-field">Nested Field</h2>
+      <form onSubmit={onSubmit}>
+        <div className="stack">
+          <Input label="Street name: " {...fields.address.fields.streetName} />
+          <footer>
+            <button>Submit</button>
+            <button onClick={reset} type="button">
+              Reset
+            </button>
+          </footer>
+        </div>
+      </form>
+      <h4>Model</h4>
+      <pre>
+        {JSON.stringify({ model, valid, dirty, submissionStatus }, null, 2)}
+      </pre>
+      <h4>Changes</h4>
+      <pre>{JSON.stringify({ changes }, null, 2)}</pre>
+      <a href="#">Back</a>
+    </>
+  );
+}

src/field.ts

@@ -103,7 +103,7 @@ export class FieldImplementation<T, Model>
   get fields(): MappedFields<T> {
     if (!this.value) {
       this.value = {} as T;
-      this.#onUpdate();
+      this.#onUpdate?.();
     }
     const handler = {
       get: (target: MappedFields<T>, key: string) => {

src/form.spec.ts

@@ -662,6 +662,24 @@ describe(Form, () => {
         expect(emails.dirty).toBeTruthy();
         expect(form.dirty).toBeTruthy();
       });
+      it('handles nested validation', () => {
+        const form = createForm({
+          value: {
+            address: {
+              streetName: '',
+            },
+          },
+          validations: {
+            address: {
+              streetName: 'required',
+            },
+          },
+        });
+        expect(form.fields.address.fields.streetName.errors).toHaveLength(1);
+        expect(form.fields.address.fields.streetName.errors[0]).toBe(
+          'required-field'
+        );
+      });
     });
   });