Which @angular/* package(s) are relevant/related to the feature request?

forms

Description

Custom radio button components have a fundamental incompatibility with Angular's new Signal Forms API (FormField). Radio buttons need:

• A model to hold the selected group value (e.g., groupValue)
• An input to define this specific radio's option value (e.g., value)

However, FormField only recognizes components with a model named value or checked. This prevents custom radio button wrappers from being used with the [formField] directive, a feature that works seamlessly with native <input type="radio"> elements.

When implementing a custom radio button component:

import { Component, input, model } from "@angular/core";
import { FormUiControl } from "@angular/forms/signals";

@Component({
  selector: "custom-radio",
  template: ` ... `,
})
export class CustomRadio implements FormUiControl<string> {
  readonly value = input<string>(""); // Option value (input, not model)
  readonly groupValue = model<string>(); // Form state (model)
}

Using it with Signal Forms fails:

<custom-radio value="option1" [formField]="field.value">Option 1</custom-radio>

Error: Component CustomRadio is an invalid [formField] directive host. The host must be a native form control or a custom form control with a 'value' or 'checked' model.

Custom checkboxes work fine with FormField because they can use a boolean checked model:

export class CustomCheckbox implements FormUiControl<boolean> {
  readonly checked = model<boolean>(false); // ✅ Recognized by FormField
}

Custom radio buttons cannot use this pattern:

• Each radio represents one option in a group
• The form state is the selected group value, not per-radio checked state
• Using a checked model would require duplicate state sync logic across all radios in the group
• The correct model name is semantically groupValue (or similar), not checked

Proposed solution

Extend FormField's component validation to support radio button patterns where the form state model is not named value or checked. Either create a specific FormRadioControl (that is similar to FormCheckboxControl but uses groupValue instead of checked or value, and allows reusing value as an input), or, more generally (and preferably), provide a way to specify which model field is supposed to be used with FormField, alowing any name instead of only value or checked.

Alternatives considered

ControlValueAccessor (legacy workaround):

• Works but doesn't benefit from Signal Forms API
• Requires callbacks instead of reactive signals
• Misses the opportunity to use modern Angular patterns in new components

Renaming groupValue → value (forces a non-intuitive public API for custom radio buttons):

• value as an input already means "this radio's option value"
• Overloading it as a model would confuse the API contract
• Cannot rename to checked (checkboxes already use that name for a different purpose)