fix(forms): Support Signal Forms in form controls - #17566
Open
rkaraivanov wants to merge 5 commits into
Open
Conversation
The `[formField]` interop `NgControl` exposes signal-backed getters only. It has no `statusChanges`, `valueChanges`, `validator`, `markAsTouched` or `setValue`, so igxInput, checkbox, switch, radio group, select, combo, simple combo and the date, time and date range pickers threw on init. Add `NgControlAdapter` in core as the single access path to the bound `NgControl`. It detects the backend and derives the missing observables from a root effect over the signal getters, keeping change detection order identical to the observable case. Controls no longer read `NgControl` internals directly. Closes #17556
rkaraivanov
added
❌ status: awaiting-test
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
It introduces a new core abstraction (NgControlAdapter) and updates multiple form controls’ initialization/validation wiring, which warrants final human review despite the added tests.
Pull request overview
This PR fixes initialization/runtime failures when Ignite UI form controls are bound via Angular Signal Forms ([formField]) by routing all NgControl access through a new adapter that normalizes missing observable APIs and control methods in the signal-backed interop control.
Changes:
- Added
NgControlAdapterincoreto provide a single, backend-aware access path forNgControl(observable vs signal). - Updated multiple form controls (input, checkbox/switch base, radio group, select, combo/simple-combo, date/time pickers) to use the adapter instead of reading
NgControlinternals directly. - Added Signal Forms-focused unit tests for the affected components and updated docs/README/CHANGELOG to document the new compatibility.
File summaries
| File | Description |
|---|---|
| skills/igniteui-angular-components/references/form-controls.md | Documents how to use Ignite UI controls with Signal Forms via [formField]. |
| projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts | Uses NgControlAdapter for required/validity/status handling under Signal Forms. |
| projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| projects/igniteui-angular/switch/src/switch/switch.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| projects/igniteui-angular/select/src/select/select.component.ts | Switches status/required/validity logic to the adapter for Signal Forms support. |
| projects/igniteui-angular/select/src/select/select.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts | Uses the adapter to safely consume status/required/validators under Signal Forms. |
| projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts | Adds Signal Forms coverage for required/invalid behaviors. |
| projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.ts | Uses the adapter for status/value/touched tracking and write/touch interop. |
| projects/igniteui-angular/input-group/src/input-group/directives-input/input.directive.spec.ts | Adds Signal Forms coverage for required/invalid/disabled/reset behaviors. |
| projects/igniteui-angular/input-group/README.md | Notes igxInput compatibility with Signal Forms ([formField]). |
| projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts | Switches checkbox/switch validity & required resolution to the adapter. |
| projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts | Uses the adapter for status/required/validity + signal-backend revalidation hook. |
| projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker-inputs.common.ts | Uses adapter-based setValue handling to support signal-backend “ignored write” semantics. |
| projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts | Switches status/required/validity logic to the adapter for Signal Forms support. |
| projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| projects/igniteui-angular/core/src/public_api.ts | Exports the new NgControlAdapter from the core public API. |
| projects/igniteui-angular/core/src/core/ng-control-adapter.ts | Introduces NgControlAdapter and signal-backed observable derivations via root effects. |
| projects/igniteui-angular/combo/src/combo/combo.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| projects/igniteui-angular/combo/src/combo/combo.common.ts | Switches combo validity/required/status wiring to use the adapter. |
| projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts | Adds Signal Forms coverage for required/invalid/disabled behaviors. |
| CHANGELOG.md | Adds an Unreleased entry documenting Signal Forms compatibility across form controls. |
Review details
- Files reviewed: 24/24 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+291
to
295
| if (this.control) { | ||
| this._statusChanges$ = this.control.statusChanges.subscribe(this.onStatusChanged.bind(this)); | ||
| this._valueChanges$ = this.control.valueChanges.subscribe(this.onValueChanged.bind(this)); | ||
| this._touchedChanges$ = this.control.touchedChanges.subscribe(this.updateValidityState.bind(this)); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The
[formField]interopNgControlexposes signal-backed getters only. It has nostatusChanges,valueChanges,validator,markAsTouchedorsetValue, so igxInput, checkbox, switch, radio group, select, combo, simple combo and the date, time and date range pickers threw on init.Add
NgControlAdapterin core as the single access path to the boundNgControl. It detects the backend and derives the missing observables from a root effect over the signal getters, keeping change detection order identical to the observable case. Controls no longer readNgControlinternals directly.Closes #17556
Type of Change (check all that apply):
How Has This Been Tested?
Checklist:
CHANGELOG.MDupdates for newly added functionality