Add SignalFormControl for bottom-up migration to Signal Forms by kirjs · Pull Request #66614 · angular/angular

kirjs · 2026-01-16T20:05:29Z

This would allow create something the looks like a FormControl and can be integrated with a FormGroup.

  emailControl = new SignalFormControl('', this.injector, (p) => {
    required(p, {message: 'Email is required'});
  });

  // 2. Use it in a legacy FormGroup
  form = new FormGroup({
    email: this.emailControl,
  });

Note: I asked a robot to break this code in sizeable commits

That said, I'm very happy to finally introduce at least some kind of SFCs to Angular 🤣

mmalerba · 2026-01-16T20:53:32Z

+      : compatForm(this.sourceValue, {injector});
+    this.fieldState = this.fieldTree();
+
+    Object.defineProperty(this, 'value', {


why are these defined like this instead of just a normal getter property?

This should be fixed in #66672

Can we land #66672 first and update this PR accordingly?

mmalerba · 2026-01-16T20:55:18Z

+  }
+
+  override getRawValue(): T {
+    return this.value;


I think we should either throw an error or properly filter out disabled fields for this

I don't understand the question here. What's the issue?

I think in reactive forms getRawValue was supposed to be the value with disabled fields filtered out? (At least that's what I remember from the previous meeting where this was discussed). So if that's the case it feels like a lie to just return the full value without filtering out the disabled fields

We discussed that, and since this is a control, not a group, we should not take disabled into account

We can remove the TODO comment now.

github-actions · 2026-01-20T18:54:36Z

Deployed adev-preview for bf6c3c5 to: https://ng-dev-previews-fw--pr-angular-angular-66614-adev-prev-5cqju58f.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

leonsenft · 2026-01-16T23:19:14Z

+  constructor(value: T, schemaOrOptions?: SchemaFn<T> | FormOptions, options?: FormOptions) {
+    super(null, null);
+
+    const [model, schema, opts] = normalizeFormArgs<T>([signal(value), schemaOrOptions, options]);


Why do we take a value–from which we create a signal–rather than a signal like the form() function?

This is because we need to immediately update the value instead of using effect (hence patching).
I added a TODO to document it better in the markdown.

I'm sorry I don't follow. Where are we immediately updating the value?

Because we own the value, we can wrap it with wrapFieldTreeForSyncUpdates below, which does it

We pass rawTree to wrapFieldTreeForSyncUpdates, which is derived from sourceValue which is signal(value). Why can't sourceValue just be a signal that the user provides? Does something break? Or is it a conceptual issue of ownership?

The idea is to never expose the source signal, this way people would only be able to change values through the form, where we'd react to changes immediately.

If we took a signal, we woudn't be able to react to changes

leonsenft · 2026-01-20T19:03:48Z

+  }
+
+  override getRawValue(): T {
+    return this.value;


I don't understand the question here. What's the issue?

leonsenft · 2026-01-26T23:23:42Z

+      : compatForm(this.sourceValue, {injector});
+    this.fieldState = this.fieldTree();
+
+    Object.defineProperty(this, 'value', {


Can we land #66672 first and update this PR accordingly?

leonsenft · 2026-01-26T23:28:37Z

+  constructor(value: T, schemaOrOptions?: SchemaFn<T> | FormOptions, options?: FormOptions) {
+    super(null, null);
+
+    const [model, schema, opts] = normalizeFormArgs<T>([signal(value), schemaOrOptions, options]);


I'm sorry I don't follow. Where are we immediately updating the value?

leonsenft · 2026-01-26T23:32:53Z

+  }
+
+  override getRawValue(): T {
+    return this.value;


We can remove the TODO comment now.

leonsenft · 2026-01-26T23:49:51Z

 ```
+
+<!-- TODO: include some high level usage comment about how people should mostly interact with this via the signal forms API exposed on .fieldTree, not via the reactive forms methods. -->
+<!-- TODO: Elaborate on why the value taken is not a signal. -->


Are these TODOs for this PR or the future? If not this PR, should they be added as items to our project?

That would be the next thing i'd do, I just want to get the big parts in first

- Add dirty, pristine, touched, untouched getters - Add markAsTouched, markAsDirty methods - Add markAsPristine, markAsUntouched methods (preserve other state)

- Add reset() method with optional value parameter - Support FormControlState unboxing ({value, disabled} format) - Add isFormControlState helper function

- Add valueChanges EventEmitter that emits when source signal changes - Add statusChanges EventEmitter that emits when status changes - Set up effects to emit to observables

- Emit ValueChangeEvent, StatusChangeEvent on changes - Emit TouchedChangeEvent, PristineChangeEvent on status changes - Emit FormResetEvent on reset() - Add emitControlEvent helper method

- Add ValueUpdateOptions type with onlySelf, emitEvent options - Add parent notification on value changes via effect - Add parent notification helpers: scheduleParentUpdate, notifyParentUnlessPending - Propagate dirty/touched/pristine/untouched to parent - Support onlySelf option to prevent parent propagation

- Add CachingWeakMap utility for memoization - Add wrapFieldTreeForSyncUpdates Proxy wrapper - Intercept fieldTree().value.set() calls to sync parent immediately - Cache wrapped trees and states to preserve identity

- Add registerOnChange, _unregisterOnChange for value change callbacks - Add registerOnDisabledChange, _unregisterOnDisabledChange for disabled callbacks - Add disabled changes effect to notify registered callbacks - Call onChange callbacks from updateValue with emitModelEvent flag

- Add disable, enable methods that throw with helpful messages - Add validator methods (set/add/remove/clear) that throw - Add setErrors, markAsPending methods that throw - Add setters for dirty/pristine/touched/untouched that throw - Add JSDoc with @usageNotes examples - Add comprehensive unit tests for SignalFormControl - Add FormGroup/FormArray integration tests - Add web tests for CVA directive lifecycle - Update migration docs with SignalFormControl usage

This make things cleaner

Consolidate everything related to converting errors in one place

Make them tree-shakeable and fix the naming

- Add more comments and docs - In signalErrorsToValidationErrors return null for empty object - Drop messages in prod mode

Add some TODOs for future things

Document that injectors are optional

Untrack callbacks, so they are not called when signals change

Make the way reset works for it to be more consistent

Clean up tests, drop old todos

We have to do this because Abstract control doesn't allow us to have value as a getter type-wise

leonsenft

reviewed-for: public-api

leonsenft · 2026-02-02T22:51:43Z

This PR was merged into the repository. The changes were merged into the following branches:

main: c750b3c

angular-automatic-lock-bot · 2026-03-05T00:19:03Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular-robot Bot added detected: feature PR contains a feature commit area: forms labels Jan 16, 2026

ngbot Bot added this to the Backlog milestone Jan 16, 2026

kirjs requested review from leonsenft and mmalerba and removed request for leonsenft January 16, 2026 20:06

kirjs force-pushed the compat5 branch from a7b4e89 to 6cef0e1 Compare January 16, 2026 20:20

pullapprove Bot requested a review from atscott January 16, 2026 20:20

kirjs force-pushed the compat5 branch from 6cef0e1 to fc0f5d0 Compare January 16, 2026 20:51

mmalerba reviewed Jan 16, 2026

View reviewed changes

pullapprove Bot requested a review from crisbeto January 16, 2026 20:57

mmalerba reviewed Jan 16, 2026

View reviewed changes

Comment thread packages/forms/signals/compat/src/signal_form_control/signal_form_control.ts Outdated

mmalerba reviewed Jan 16, 2026

View reviewed changes

Comment thread packages/forms/signals/compat/src/signal_form_control/signal_form_control.ts Outdated

Comment thread adev/src/content/guide/forms/signals/migration.md

leonsenft added the adev: preview label Jan 20, 2026

leonsenft requested changes Jan 20, 2026

View reviewed changes

kirjs force-pushed the compat5 branch 3 times, most recently from e87c138 to 35e7840 Compare January 26, 2026 16:29

kirjs requested review from leonsenft and mmalerba January 26, 2026 16:29

leonsenft requested changes Jan 26, 2026

View reviewed changes

kirjs force-pushed the compat5 branch from 35e7840 to fa1d9ea Compare January 27, 2026 16:03

kirjs requested a review from leonsenft January 27, 2026 22:13

kirjs force-pushed the compat5 branch from 662075c to f60e4b2 Compare January 27, 2026 22:19

leonsenft approved these changes Jan 27, 2026

View reviewed changes

kirjs force-pushed the compat5 branch from f60e4b2 to db4ddbb Compare January 27, 2026 22:48

mmalerba approved these changes Jan 28, 2026

View reviewed changes

kirjs force-pushed the compat5 branch 2 times, most recently from 90aa71c to a0c5a05 Compare January 30, 2026 20:13

kirjs added 18 commits January 30, 2026 17:45

refactor(forms): add dirty/touched status management

ca861af

- Add dirty, pristine, touched, untouched getters - Add markAsTouched, markAsDirty methods - Add markAsPristine, markAsUntouched methods (preserve other state)

refactor(forms): add reset functionality

91b9d10

- Add reset() method with optional value parameter - Support FormControlState unboxing ({value, disabled} format) - Add isFormControlState helper function

refactor(forms): add valueChanges and statusChanges observables

13c361d

- Add valueChanges EventEmitter that emits when source signal changes - Add statusChanges EventEmitter that emits when status changes - Set up effects to emit to observables

refactor(forms): add events observable with ControlEvents

a7bcf9a

- Emit ValueChangeEvent, StatusChangeEvent on changes - Emit TouchedChangeEvent, PristineChangeEvent on status changes - Emit FormResetEvent on reset() - Add emitControlEvent helper method

refactor(forms): add fieldTree wrapping for sync parent updates

cc2086e

- Add CachingWeakMap utility for memoization - Add wrapFieldTreeForSyncUpdates Proxy wrapper - Intercept fieldTree().value.set() calls to sync parent immediately - Cache wrapped trees and states to preserve identity

refactor(forms): use markAsPristine and markAsUntouched on field node

000e128

This make things cleaner

refactor(forms): address feedback

6f34127

Consolidate everything related to converting errors in one place

refactor(forms): Clean up the way errors are done

cb42edd

Make them tree-shakeable and fix the naming

refactor(forms): Address more feedback

433f110

- Add more comments and docs - In signalErrorsToValidationErrors return null for empty object - Drop messages in prod mode

refactor(forms): Address more feedback

0ee97d6

Add some TODOs for future things

refactor(forms): Address more feedback

d2ee711

Document that injectors are optional

refactor(forms): Address more feedback

56c6caa

Untrack callbacks, so they are not called when signals change

refactor(forms): Address more feedback

acb861e

Make the way reset works for it to be more consistent

refactor(forms): Address more feedback

2f2c1e0

Clean up tests, drop old todos

refactor(forms): Setup closure compatible property override

bf6c3c5

We have to do this because Abstract control doesn't allow us to have value as a getter type-wise

kirjs force-pushed the compat5 branch from 7a9c235 to bf6c3c5 Compare January 30, 2026 22:46

kirjs added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels Jan 30, 2026

leonsenft approved these changes Feb 2, 2026

View reviewed changes

leonsenft removed request for atscott and crisbeto February 2, 2026 22:49

leonsenft merged commit c750b3c into angular:main Feb 2, 2026
24 checks passed

angular-automatic-lock-bot Bot locked and limited conversation to collaborators Mar 5, 2026

Conversation

kirjs commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

leonsenft left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

leonsenft commented Feb 2, 2026

Uh oh!

angular-automatic-lock-bot Bot commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kirjs commented Jan 16, 2026 •

edited

Loading

github-actions Bot commented Jan 20, 2026 •

edited

Loading