fix(form): initialize value / defaultValue keys when rendering optional fields

packages/ts/form/src/BinderNode.ts

@@ -257,18 +257,13 @@ export class BinderNode<M extends AbstractModel = AbstractModel> extends EventTa
       return undefined;
     }
 
-    let { value } = this.parent;
-
-    if (value === undefined) {
-      this.parent.initializeValue(true);
-      ({ value } = this.parent);
-    }
+    this.initializeValue();
 
     const key = this.model[_key];
 
     // The value of parent in unknown, so we need to cast it.
     type ParentValue = { readonly [K in typeof key]: Value<M> };
-    return (value as ParentValue)[key];
+    return (this.parent.value as ParentValue)[key];
   }
 
   set value(value: Value<M> | undefined) {

packages/ts/form/test/Binder.test.ts

@@ -79,6 +79,8 @@ describe('@hilla/form', () => {
 
       const expectedEmptyOrder: Order = {
         idString: '',
+        dateStart: undefined,
+        dateEnd: undefined,
         customer: {
           idString: '',
           fullName: '',

packages/ts/form/test/TestModels.ts

@@ -17,6 +17,7 @@ import {
   Size,
   StringModel,
 } from '../src/index.js';
+import { Future } from '../Validators';
 
 export interface IdEntity {
   idString: string;
@@ -83,6 +84,8 @@ export class CustomerModel<T extends Customer = Customer> extends IdEntityModel<
 
 export interface Order extends IdEntity {
   customer: Customer;
+  dateStart?: string;
+  dateEnd?: string;
   notes: string;
   priority: number;
   products: Product[];
@@ -99,6 +102,20 @@ export class OrderModel<T extends Order = Order> extends IdEntityModel<T> {
     );
   }
 
+  get dateStart(): StringModel {
+    return this[_getPropertyModel](
+      'dateStart',
+      (parent, key) => new StringModel(parent, key, true, { validators: [new Future()] }),
+    );
+  }
+
+  get dateEnd(): StringModel {
+    return this[_getPropertyModel](
+      'dateEnd',
+      (parent, key) => new StringModel(parent, key, true, { validators: [new Future()] }),
+    );
+  }
+
   get notes(): StringModel {
     return this[_getPropertyModel](
       'notes',

packages/ts/form/test/Validation.test.ts

@@ -19,6 +19,7 @@ import {
   type Validator,
   type ValueError,
 } from '../src/index.js';
+import { Future } from '../Validators';
 import {
   type Customer,
   IdEntityModel,
@@ -176,6 +177,38 @@ describe('@hilla/form', () => {
       ]);
     });
 
+    it('should run all validations after using binder.read()', async () => {
+      const valueFromEndpoint: Order = {
+        idString: '',
+        customer: {
+          idString: '',
+          fullName: 'Full Name',
+          nickName: 'Nick',
+        },
+        notes: 'ignore',
+        priority: 1,
+        products: [],
+      };
+      binder.read(valueFromEndpoint);
+
+      // Get nodes for optional fields to signal that they are bound
+      const dateStartNode = binder.for(binder.model.dateStart);
+      const dateEndNode = binder.for(binder.model.dateEnd);
+      expect(dateStartNode.value).to.be.undefined;
+      expect(dateEndNode.value).to.be.undefined;
+
+      // User sets values
+      dateStartNode.value = '2020-01-01';
+      dateEndNode.value = '2020-01-02';
+
+      const errors = await binder.validate();
+      expect(errors.length, 'number of errors').to.equal(2);
+      expect(errors[0].message).to.contain('future');
+      expect(errors[0].property).to.equal('dateStart');
+      expect(errors[0].message).to.contain('future');
+      expect(errors[1].property).to.equal('dateEnd');
+    });
+
     describe('clearing', () => {
       (['reset', 'clear'] as const).forEach((methodName) => {
         it(`should reset validation on ${methodName}`, async () => {