Skip to content

Comments

Signal Forms: support FormUiControl in Template & Reactive Forms#67267

Open
alxhub wants to merge 9 commits intoangular:mainfrom
alxhub:forms-fvc
Open

Signal Forms: support FormUiControl in Template & Reactive Forms#67267
alxhub wants to merge 9 commits intoangular:mainfrom
alxhub:forms-fvc

Conversation

@alxhub
Copy link
Member

@alxhub alxhub commented Feb 25, 2026

In this PR, we implement support in template & reactive forms for the new style of Signal Forms control:

@Component({
  selector: 'fancy-input',
  template: `
    <textarea [value]="value()" (input)="value.set($event.target.value)"></textarea>
  `,
})
export class FancyInput implements FormValueControl<string> {
  value = model<string>('');
}

// consumption
<fancy-input ngModel />
<fancy-input [formControl]="dataControl" />
<fancy-input formControlName="data" />

If `FormsModule` or `ReactiveFormsModule` is present in the scope of a
template, plain `<input>` and other form elements will get default CVA
directives added. This commit adds an `ngNoCva` attribute as a negative
selector for those directives, so `<input ngNoCva>` elements will not have
them matched.
Delay the selection of a CVA until after the `ɵɵcontrol` instruction has a chance to execute.
This is necessary to delay the error that would be thrown for a missing CVA until after we have a
chance to recognize we're actually on an FVC/FCC.
…nterop

Add `nativeElement` and a few other affordances to the control instruction implementation.
Previously we were only adding the `ɵɵcontrol` instruction on property bindings. This commit
fixes that bug by adding matching on attributes as well.
Adds detection of the `ɵngControlCreate` special lifecycle hook to the JIT compiler.
Relocate some utility code into `@angular/forms` instead of the signal-forms specific entrypoint,
to facilitate their reuse in existing template & reactive forms.
Introduces an internal signal that tracks whether `Validators.required` is in the set of validators
for an `AbstractControl`. This signal is updated whenever the validators are changed.
…ontrol

Update `NgControl` to support binding to custom controls via the new `ngControlCreate` and
`ngControlUpdate` lifecycle hooks. This will allow Reactive and Template-driven forms to integrate
with components that use the new "Functional Value Accessors" (FVC) architecture.

Key changes:
- Implement synchronization of control state between `FormControl` and custom controls.
- Add support for `parseErrors` signals from custom controls, integrating them into the Reactive
  Forms validation loop via a dynamic validator.
- Convert Reactive Forms errors into `ReactiveValidationError` objects for consumption by custom
  controls.
- Update `NgModel`, `FormControlDirective`, and `FormControlName` to provide necessary dependencies
  (`Injector`, `Renderer2`) to `NgControl`.
- Rename `setUpControl` to `setUpControlValueAccessor` to clarify its role in the traditional
  CVA path.
Implement support for `FormUiComponent`s in both Reactive and Template-driven
forms. This allows components that use the new signal-based form control
architecture to be used seamlessly within existing Angular form paradigms.

Key changes:
- Integrated `ɵngControlCreate` and `ɵngControlUpdate` lifecycle hooks into
  `NgModel`, `FormControlDirective`, and `FormControlName`.
- Implemented branching logic to choose between the traditional `ControlValueAccessor` (CVA) path and the new FVC path based on the host element's capabilities.
- Added comprehensive unit tests for FVC integration in both Reactive (`reactive_fvc.spec.ts`) and Template-driven (`template_fvc.spec.ts`) forms, covering:
    - Value synchronization (model -> view and view -> model).
    - Status synchronization (touched, dirty, valid, invalid, pending, required).
    - Error propagation and `parseErrors` support.
    - Fallback behavior to native DOM properties (disabled, required) when FVC inputs are missing.
    - Graceful fallback to CVA when no FVC pattern is detected.
- Refined `NgModel` to correctly handle `required` validation via its existing `RequiredValidator` directive while supporting FVC for other properties.
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: compiler Issues related to `ngc`, Angular's template compiler area: core Issues related to the framework runtime area: forms labels Feb 25, 2026
@ngbot ngbot bot added this to the Backlog milestone Feb 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: compiler Issues related to `ngc`, Angular's template compiler area: core Issues related to the framework runtime area: forms detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant