angular/packages/forms/signals/test/node/recursive_logic.spec.ts
Miles Malerba b8314bd340 feat(forms): add experimental signal-based forms (#63408)
This commit introduces an experimental version of a new signal-based forms API for Angular. This new API aims to explore how signals can be leveraged to create a more declarative, intuitive, and reactive way of handling forms.

The primary goals of this new signal-based approach are:

*   **Signal-centric Design:** Place signals at the core of the forms experience, enabling a truly reactive programming model for form state and logic.
*   **Declarative Logic:** Allow developers to define form behavior, such as validation and conditional fields, declaratively using TypeScript. This moves logic out of the template and into a typed, testable schema.
*   **Developer-Owned Data Model:** The library does not maintain a copy of data in a form model, but instead read and write it via a developer-provided `WritableSignal`, eliminating the need for applications to synchronize their data with the form system.
*   **Interoperability:** A key design goal is seamless interoperability with existing reactive forms, allowing for incremental adoption.
*   **Bridging Template and Reactive Forms:** This exploration hopes to close the gap between template and reactive forms, offering a unified and more powerful approach that combines the best aspects of both.

This initial version of the experimental API includes the core building blocks, such as the `form()` function, `Field` and `FieldState` objects, and a `[control]` directive for binding to UI elements. It also introduces a schema-based system for defining validation, conditional logic, and other form behaviors.

Note: This is an early, experimental API. It is not yet complete and is subject to change based on feedback and further exploration.

Co-authored-by: Kirill Cherkashin <kirts@google.com>
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Leon Senft <leonsenft@users.noreply.github.com>
Co-authored-by: Dylan Hunn <dylhunn@gmail.com>
Co-authored-by: Michael Small <michael-small@users.noreply.github.com>

PR Close #63408
2025-08-28 09:02:43 -07:00

133 lines
4.2 KiB
TypeScript

/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {computed, Injector, signal, type Signal} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {customError} from '../../public_api';
import {disabled, validate} from '../../src/api/logic';
import {applyEach, applyWhen, applyWhenValue, form, schema} from '../../src/api/structure';
import type {Field, Schema} from '../../src/api/types';
interface TreeData {
level: number;
next: TreeData | null;
}
function narrowed<TValue, TNarrowed extends TValue>(
field: Field<TValue> | undefined,
guard: (value: TValue) => value is TNarrowed,
): Signal<Field<TNarrowed> | undefined> {
return computed(
() => field && (guard(field().value()) ? (field as Field<TNarrowed>) : undefined),
);
}
function isNonNull<T>(t: T): t is NonNullable<T> {
return t !== null;
}
describe('recursive schema logic', () => {
it('should support recursive logic', () => {
const s = schema<TreeData>((p) => {
disabled(p.level, ({valueOf}) => {
return valueOf(p.level) % 2 === 0;
});
applyWhenValue(p.next, isNonNull, s);
});
const f = form<TreeData>(
signal({level: 0, next: {level: 1, next: {level: 2, next: {level: 3, next: null}}}}),
s,
{injector: TestBed.inject(Injector)},
);
expect(f.level().disabled()).toBe(true);
expect(narrowed(f.next, isNonNull)()?.level().disabled()).toBe(false);
expect(narrowed(narrowed(f.next, isNonNull)()?.next, isNonNull)()?.level().disabled()).toBe(
true,
);
expect(
narrowed(narrowed(narrowed(f.next, isNonNull)()?.next, isNonNull)()?.next, isNonNull)()
?.level()
.disabled(),
).toBe(false);
});
it('should support co-recursive logic', () => {
const s1: Schema<TreeData> = schema((p) => {
disabled(p.level, ({valueOf}) => valueOf(p.level) % 2 === 0);
applyWhenValue(p.next, isNonNull, s2);
});
const s2: Schema<TreeData> = schema((p) => {
disabled(p.level, ({valueOf}) => valueOf(p.level) % 2 === 0);
applyWhenValue(p.next, isNonNull, s1);
});
const f = form<TreeData>(
signal({
level: 0,
next: {level: 1, next: {level: 2, next: {level: 3, next: null!}}},
}),
s1,
{injector: TestBed.inject(Injector)},
);
expect(f.level().disabled()).toBe(true);
expect(narrowed(f.next, isNonNull)()?.level().disabled()).toBe(false);
expect(narrowed(narrowed(f.next, isNonNull)()?.next, isNonNull)()?.level().disabled()).toBe(
true,
);
expect(
narrowed(narrowed(narrowed(f.next, isNonNull)()?.next, isNonNull)()?.next, isNonNull)()
?.level()
.disabled(),
).toBe(false);
});
it('should support recursive logic with arrays', () => {
interface Dom {
tag: string;
children: Dom[];
}
const domSchema = schema<Dom>((p) => {
applyEach(p.children, domSchema);
applyWhen(
p.children,
({valueOf}) => valueOf(p.tag) === 'table',
(children) => {
applyEach(children, (c) => {
validate(c.tag, ({value}) =>
value() !== 'tr' ? customError({kind: 'invalid-child'}) : undefined,
);
});
},
);
applyWhen(
p.children,
({valueOf}) => valueOf(p.tag) === 'tr',
(children) => {
applyEach(children, (c) => {
validate(c.tag, ({value}) =>
value() !== 'td' ? customError({kind: 'invalid-child'}) : undefined,
);
});
},
);
});
const data = signal<Dom>({tag: 'div', children: [{tag: 'span', children: []}]});
const f = form(data, domSchema, {injector: TestBed.inject(Injector)});
expect(f().valid()).toBe(true);
data.set({tag: 'table', children: [{tag: 'span', children: []}]});
expect(f().valid()).toBe(false);
data.set({tag: 'table', children: [{tag: 'tr', children: [{tag: 'span', children: []}]}]});
expect(f().valid()).toBe(false);
data.set({tag: 'table', children: [{tag: 'tr', children: [{tag: 'td', children: []}]}]});
expect(f().valid()).toBe(true);
});
});