Skip to content

fix(forms): gate invalid state on touched or dirty - #17740

Open
viktorkombov wants to merge 2 commits into
22.2.xfrom
vkombov/fix-17671-22.2.x
Open

viktorkombov wants to merge 2 commits into
22.2.xfrom
vkombov/fix-17671-22.2.x

Conversation

@viktorkombov

Copy link
Copy Markdown
Contributor

Closes #17671

Description

With [formField], Angular writes the field's raw invalid() into the invalid input of igx-checkbox, igx-switch and igx-radio-group whenever it changes, bypassing the touched-or-dirty rule these controls apply for reactive and template-driven forms — e.g. a pristine field painted the error style right after reset() or when a cross-field rule made it required. Same ordering issue #17637 fixed for required.

  • invalid is now a gated setter on CheckboxBaseDirective and IgxRadioGroupDirective: with a bound form control, true is coerced to false while the control is untouched and pristine (checkbox/switch/radio became delegating accessors to keep @Input/@HostBinding).
  • The radio group derives invalid from the control on status changes instead of always clearing it, since Signal Forms only push validity on change.
  • Fixed the group's registerOnTouched never reaching the radio buttons (the forms directive registers before any buttons exist), so blur now marks the field touched.

Tests: 3 new regression specs (fail without the fix); full non-grid suite green (3386), lint clean. Changelog updated; no API changes.

🤖 Generated with Claude Code

Type of Change (check all that apply):

  • Bug fix
  • New functionality
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Refactoring (no functional changes)
  • Documentation
  • Demos
  • CI/CD
  • Tests
  • Changelog
  • Skills/Agents

Component(s) / Area(s) Affected:

How Has This Been Tested?

  • Unit tests
  • Manual testing
  • Automated e2e tests

Test Configuration:

  • Angular version:
  • Browser(s):
  • OS:

Screenshots / Recordings

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them
  • Accessibility (ARIA, keyboard navigation, focus management) has been verified

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟢 Approval recommended

The focused implementation consistently addresses the reported ordering issue and includes targeted regression coverage.

Review effort: Balanced
Findings: None

What changed in this PR

This PR aligns Signal Forms invalid styling with reactive/template-driven forms by gating invalid state until controls are touched or dirty.

Changes:

  • Gates checkbox, switch, radio, and radio-group invalid states.
  • Correctly propagates radio-group invalid and touched states.
  • Adds regression tests, documentation, and changelog coverage.
File Description
CHANGELOG.md Documents the Signal Forms fix.
skills/​igniteui-angular-components/​references/​form-controls.md Clarifies invalid-state behavior.
projects/​igniteui-angular/​directives/​src/​directives/​checkbox/​checkbox-base.directive.ts Centralizes invalid-state gating.
projects/​igniteui-angular/​checkbox/​src/​checkbox/​checkbox.component.ts Delegates invalid state to the base directive.
projects/​igniteui-angular/​checkbox/​src/​checkbox/​checkbox.component.spec.ts Tests reset behavior.
projects/​igniteui-angular/​switch/​src/​switch/​switch.component.ts Delegates invalid state to the base directive.
projects/​igniteui-angular/​switch/​src/​switch/​switch.component.spec.ts Tests conditional validation.
projects/​igniteui-angular/​radio/​src/​radio/​radio.component.ts Supports group-driven invalid propagation.
projects/​igniteui-angular/​radio/​src/​radio/​radio-group/​radio-group.directive.ts Gates and propagates group invalid state.
projects/​igniteui-angular/​radio/​src/​radio/​radio-group/​radio-group.directive.spec.ts Tests reset behavior.

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants