feat(forms): support signal-based schemas in validateStandardSchema

SkyZeroZx · SkyZeroZx · commit 0b0246065aa0 · 2026-02-02T16:26:43.000-05:00
Allow `validateStandardSchema()` to consume a computed schema so validation rules stay in sync when the schema changes over time. This supports schemas stored in computed signals (e.g. zod schemas that depend on input signals) and ensures the effective schema updates after initialization instead of being captured once. Fixes #66867
diff --git a/goldens/public-api/forms/signals/index.api.md b/goldens/public-api/forms/signals/index.api.md
@@ -573,7 +573,7 @@ export function validateAsync<TValue, TParams, TResult, TPathKind extends PathKi
 export function validateHttp<TValue, TResult = unknown, TPathKind extends PathKind = PathKind.Root>(path: SchemaPath<TValue, SchemaPathRules.Supported, TPathKind>, opts: HttpValidatorOptions<TValue, TResult, TPathKind>): void;
 
 // @public
-export function validateStandardSchema<TSchema, TModel extends IgnoreUnknownProperties<TSchema>>(path: SchemaPath<TModel> & SchemaPathTree<TModel>, schema: StandardSchemaV1<TSchema>): void;
+export function validateStandardSchema<TSchema, TModel extends IgnoreUnknownProperties<TSchema>>(path: SchemaPath<TModel> & SchemaPathTree<TModel>, schema: StandardSchemaV1<TSchema> | LogicFn<TModel, StandardSchemaV1<unknown> | undefined>): void;
 
 // @public
 export function validateTree<TValue, TPathKind extends PathKind = PathKind.Root>(path: SchemaPath<TValue, SchemaPathRules.Supported, TPathKind>, logic: NoInfer<TreeValidator<TValue, TPathKind>>): void;
diff --git a/packages/forms/signals/src/api/rules/validation/standard_schema.ts b/packages/forms/signals/src/api/rules/validation/standard_schema.ts
@@ -9,7 +9,7 @@
 import {resource, ɵisPromise} from '@angular/core';
 import type {StandardSchemaV1} from '@standard-schema/spec';
 import {addDefaultField} from '../../../field/validation';
-import type {FieldTree, SchemaPath, SchemaPathTree} from '../../types';
+import type {FieldTree, LogicFn, SchemaPath, SchemaPathTree} from '../../types';
 import {createMetadataKey, metadata} from '../metadata';
 import {validateAsync} from './validate_async';
 import {validateTree} from './validate_tree';
@@ -54,7 +54,7 @@ export type IgnoreUnknownProperties<T> =
  * See https://github.com/standard-schema/standard-schema for more about standard schema.
  *
  * @param path The `FieldPath` to the field to validate.
- * @param schema The standard schema compatible validator to use for validation.
+ * @param schema The standard schema compatible validator to use for validation, or a LogicFn that returns the schema.
  * @template TSchema The type validated by the schema. This may be either the full `TValue` type,
  *   or a partial of it.
  * @template TValue The type of value stored in the field being validated.
@@ -65,7 +65,7 @@ export type IgnoreUnknownProperties<T> =
  */
 export function validateStandardSchema<TSchema, TModel extends IgnoreUnknownProperties<TSchema>>(
   path: SchemaPath<TModel> & SchemaPathTree<TModel>,
-  schema: StandardSchemaV1<TSchema>,
+  schema: StandardSchemaV1<TSchema> | LogicFn<TModel, StandardSchemaV1<unknown> | undefined>,
 ) {
   // We create both a sync and async validator because the standard schema validator can return
   // either a sync result or a Promise, and we need to handle both cases. The sync validator
@@ -75,16 +75,19 @@ export function validateStandardSchema<TSchema, TModel extends IgnoreUnknownProp
   type Result = StandardSchemaV1.Result<TSchema> | Promise<StandardSchemaV1.Result<TSchema>>;
   const VALIDATOR_MEMO = metadata(
     path as SchemaPath<TModel>,
-    createMetadataKey<Result>(),
-    ({value}) => {
-      return schema['~standard'].validate(value());
+    createMetadataKey<Result | undefined>(),
+    (ctx) => {
+      const resolvedSchema = typeof schema === 'function' ? schema(ctx) : schema;
+      return resolvedSchema
+        ? (resolvedSchema['~standard'].validate(ctx.value()) as Result)
+        : undefined;
     },
   );
 
   validateTree<TModel>(path, ({state, fieldTreeOf}) => {
-    // Skip sync validation if the result is a Promise.
+    // Skip sync validation if the result is a Promise or undefined.
     const result = state.metadata(VALIDATOR_MEMO)!();
-    if (ɵisPromise(result)) {
+    if (!result || ɵisPromise(result)) {
       return [];
     }
     return (
@@ -102,7 +105,7 @@ export function validateStandardSchema<TSchema, TModel extends IgnoreUnknownProp
     params: ({state}) => {
       // Skip async validation if the result is *not* a Promise.
       const result = state.metadata(VALIDATOR_MEMO)!();
-      return ɵisPromise(result) ? result : undefined;
+      return result && ɵisPromise(result) ? result : undefined;
     },
     factory: (params) => {
       return resource({
diff --git a/packages/forms/signals/test/node/BUILD.bazel b/packages/forms/signals/test/node/BUILD.bazel
@@ -5,6 +5,7 @@ ng_project(
     testonly = True,
     srcs = glob(["**/*.spec.ts"]),
     deps = [
+        "//:node_modules/@standard-schema/spec",
         "//:node_modules/zod",
         "//packages/common/http",
         "//packages/common/http/testing",
diff --git a/packages/forms/signals/test/node/api/validators/standard_schema.spec.ts b/packages/forms/signals/test/node/api/validators/standard_schema.spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ApplicationRef, Injector, signal} from '@angular/core';
+import {ApplicationRef, computed, Injector, linkedSignal, signal} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import * as z from 'zod';
 import {form, schema, validateStandardSchema} from '../../../../public_api';
@@ -209,4 +209,204 @@ describe('standard schema integration', () => {
 
     expect(f.age().errors()[0].message).toBe('Age must be non-negative');
   });
+
+  it('should support reactive schema using computed signal', () => {
+    const minLength = signal(2);
+
+    const zodSchema = computed(() =>
+      z.object({
+        first: z.string().min(minLength()),
+        last: z.string().min(3),
+      }),
+    );
+
+    const nameForm = form(
+      signal({first: 'A', last: 'B'}),
+      (p) => {
+        validateStandardSchema(p, () => zodSchema());
+      },
+      {injector: TestBed.inject(Injector)},
+    );
+
+    // Initially, first name should have error (length 1, min 2)
+    expect(nameForm.first().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 2 character/),
+        }),
+      }),
+    ]);
+
+    // Change minLength to 1, should remove error
+    minLength.set(1);
+    expect(nameForm.first().errors()).toEqual([]);
+
+    // Change minLength to 3, should add error again
+    minLength.set(3);
+    expect(nameForm.first().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 3 character/),
+        }),
+      }),
+    ]);
+  });
+
+  it('should support reactive schema using signal', () => {
+    const minLength = signal(2);
+
+    const nameForm = form(
+      signal({first: 'A', last: 'B'}),
+      (p) => {
+        validateStandardSchema(p, () =>
+          z.object({
+            first: z.string().min(minLength()),
+            last: z.string().min(3),
+          }),
+        );
+      },
+      {injector: TestBed.inject(Injector)},
+    );
+
+    // Initially, first name should have error (length 1, min 2)
+    expect(nameForm.first().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 2 character/),
+        }),
+      }),
+    ]);
+
+    // Change minLength to 1, should remove error
+    minLength.set(1);
+    expect(nameForm.first().errors()).toEqual([]);
+
+    // Change minLength to 5, should add error again
+    minLength.set(5);
+    expect(nameForm.first().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 5 character/),
+        }),
+      }),
+    ]);
+  });
+
+  it('should support reactive schema using linkedSignal', () => {
+    const minFirstLength = signal(2);
+    const minLastLength = linkedSignal(() => minFirstLength() + 1);
+
+    const nameForm = form(
+      signal({first: 'A', last: 'BB'}),
+      (p) => {
+        validateStandardSchema(p, () =>
+          z.object({
+            first: z.string().min(minFirstLength()),
+            last: z.string().min(minLastLength()),
+          }),
+        );
+      },
+      {injector: TestBed.inject(Injector)},
+    );
+
+    // Initially, first needs 2 chars, last needs 3 chars (2+1)
+    expect(nameForm.first().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 2 character/),
+        }),
+      }),
+    ]);
+    expect(nameForm.last().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 3 character/),
+        }),
+      }),
+    ]);
+
+    // Change minFirstLength to 1, linkedSignal auto-updates to 2
+    minFirstLength.set(1);
+    expect(nameForm.first().errors()).toEqual([]);
+    expect(nameForm.last().errors()).toEqual([]);
+
+    // Change minFirstLength to 4, linkedSignal auto-updates to 5
+    minFirstLength.set(4);
+    expect(nameForm.first().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 4 character/),
+        }),
+      }),
+    ]);
+    expect(nameForm.last().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Too small|String must contain at least 5 character/),
+        }),
+      }),
+    ]);
+  });
+
+  it('should support reactive schema using LogicFn with field context', () => {
+    type FormModel = {
+      type: 'email' | 'phone';
+      value: string;
+    };
+
+    const model = signal<FormModel>({type: 'email', value: 'invalid'});
+    const nameForm = form(
+      model,
+      (p) => {
+        validateStandardSchema(p, (ctx) => {
+          const formValue = ctx.value();
+          if (formValue.type === 'email') {
+            return z.object({
+              type: z.literal('email'),
+              value: z.email(),
+            });
+          } else {
+            return z.object({
+              type: z.literal('phone'),
+              value: z.string().regex(/^\d{3}-\d{3}-\d{4}$/),
+            });
+          }
+        });
+      },
+      {injector: TestBed.inject(Injector)},
+    );
+
+    // Initially type is 'email', value should have email error
+    expect(nameForm.value().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Invalid email/),
+        }),
+      }),
+    ]);
+
+    // Change to phone type, should validate as phone number
+    model.set({type: 'phone', value: '123-456-7890'});
+    expect(nameForm.value().errors()).toEqual([]);
+
+    // Invalid phone number
+    model.set({type: 'phone', value: 'invalid-phone'});
+    expect(nameForm.value().errors()).toEqual([
+      jasmine.objectContaining({
+        kind: 'standardSchema',
+        issue: jasmine.objectContaining({
+          message: jasmine.stringMatching(/Invalid/),
+        }),
+      }),
+    ]);
+  });
 });
