mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
b8314bd340
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
118 lines
3.2 KiB
TypeScript
118 lines
3.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 {Injector, signal} from '@angular/core';
|
|
import {form, hidden, validate, customError} from '@angular/forms/signals';
|
|
import {TestBed} from '@angular/core/testing';
|
|
|
|
describe('hidden', () => {
|
|
it('should initially be false', () => {
|
|
const cat = signal({name: 'Pirojok-the-cat', age: 5});
|
|
const f = form(
|
|
cat,
|
|
(p) => {
|
|
hidden(p, ({value}) => {
|
|
return value.name === 'hidden-cat';
|
|
});
|
|
},
|
|
{injector: TestBed.inject(Injector)},
|
|
);
|
|
|
|
expect(f().hidden()).toBe(false);
|
|
expect(f.name().hidden()).toBe(false);
|
|
});
|
|
|
|
it('returns true when condition is met', () => {
|
|
const cat = signal({name: 'Pirojok-the-cat', age: 5});
|
|
const f = form(
|
|
cat,
|
|
(p) => {
|
|
hidden(p.name, ({value}) => {
|
|
return value() === 'hidden-cat';
|
|
});
|
|
},
|
|
{injector: TestBed.inject(Injector)},
|
|
);
|
|
|
|
f.name().value.set('hidden-cat');
|
|
expect(f.name().hidden()).toBe(true);
|
|
});
|
|
|
|
it('propagates the value down', () => {
|
|
const cat = signal({name: 'Pirojok-the-cat', age: 5});
|
|
const f = form(
|
|
cat,
|
|
(p) => {
|
|
hidden(p, ({value}) => {
|
|
return value().name === 'hidden-cat';
|
|
});
|
|
},
|
|
{injector: TestBed.inject(Injector)},
|
|
);
|
|
|
|
f.name().value.set('hidden-cat');
|
|
expect(f.name().hidden()).toBe(true);
|
|
expect(f().hidden()).toBe(true);
|
|
});
|
|
|
|
it('disables validation for the field', () => {
|
|
const cat = signal({name: 'Pirojok-the-cat', age: 5});
|
|
const f = form(
|
|
cat,
|
|
(p) => {
|
|
hidden(p.name, ({value}) => {
|
|
return value() === 'hidden-cat';
|
|
});
|
|
|
|
validate(p.name, () => {
|
|
return customError({kind: 'dog'});
|
|
});
|
|
},
|
|
{injector: TestBed.inject(Injector)},
|
|
);
|
|
|
|
expect(f.name().valid()).withContext('Name is intially invalid').toBeFalse();
|
|
expect(f().valid()).withContext('Form is intially invalid').toBeFalse();
|
|
|
|
f.name().value.set('hidden-cat');
|
|
expect(f.name().hidden()).toBeTrue();
|
|
expect(f.name().valid()).toBeTrue();
|
|
expect(f().valid()).toBeTrue();
|
|
|
|
f.name().value.set('visible-cat');
|
|
expect(f.name().valid()).toBeFalse();
|
|
expect(f().valid()).toBeFalse();
|
|
});
|
|
|
|
xit('disables touch state propagation?', () => {
|
|
const cat = signal({name: 'Pirojok-the-cat', age: 5});
|
|
const f = form(
|
|
cat,
|
|
(p) => {
|
|
hidden(p.name, ({value}) => {
|
|
return value() === 'hidden-cat';
|
|
});
|
|
},
|
|
{injector: TestBed.inject(Injector)},
|
|
);
|
|
|
|
expect(f.name().touched()).withContext('Name is intially untouched').toBeFalse();
|
|
expect(f().touched()).withContext('Form is intially intouched').toBeFalse();
|
|
|
|
f.name().markAsTouched();
|
|
expect(f.name().touched()).toBeTrue();
|
|
expect(f().touched()).toBeTrue();
|
|
|
|
f.name().value.set('hidden-cat');
|
|
|
|
expect(f.name().touched()).withContext('hidden name is not touched').toBeFalse();
|
|
expect(f().touched())
|
|
.withContext('form with a hidden touched field is not touched')
|
|
.toBeFalse();
|
|
});
|
|
});
|