Skip to content

Warning regarding "disabled" property of [formControl] family of directives refers to behavior thats specific to a subset of ControlValueAccessors, but shows up for all of them #57793

Closed as not planned

Description

@Erbenos

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

I have a custom component implementing ControlValueAccessor that wraps around native <input type="radio" /> so that I can provide more custom design, which is a common task. Radio buttons of a group work with same formControl instance with the way things are implemented in my case. The inner <input type="radio" /> does NOT use RadioControlValueAccessor.

I let my custom component have 'disabled' Input and I do document that when this input is disabled=true then that takes precedence over the status of the form control (that it gets provided through [formControl], [formControlName], etc...), otherwise form control status is the one in effect. This works just fine for selectively disabling single radio buttons, yet, I get the warning from

of

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

But thats not true, because that effect may not happen for ControlValueAccessors that are implemented outside Angular, unlike eg.: RadioControlValueAccessor, see

this.setProperty('disabled', isDisabled);
.

But thats not the accessor I am using anywhere in my code, so this warning still shows up, even though its not related to my usecase, where the behavior is well documented.

So now I have to:

  1. Be stuck with the warning, even though its false positive
  2. Use a different name other than "disabled"

Could the warning be moved away from [formControl] directives, to the subclasses of BuiltInControlValueAccessor that actually do the disabled prop writing behavior instead?

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-x9t7mb?file=src%2Fmain.ts

Very simple empty implementation of ControlValueAccessor with a disabled input. Note the warning in console which is not actually relevant.

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

@angular/forms: 17.0.9
Node v22.1.0
Npm 10.7.0

Anything else?

No response

Activity

  1. added this to the needsTriage milestone on Sep 13, 2024
  2. Erbenos commented on Sep 18, 2024

    @Erbenos
    ContributorAuthor

    Updated the original description with a very simple repro case.

  3. JeanMeche commented on Oct 29, 2026

    @JeanMeche
    Member

    This is basically a directive matching issue. The disabled input is both used for your custom component and the FormGroupDirective.

    You will encounter a similar issue with signal forms, because disabled is handled at the form level, not in the UI.

    In both cases you shouldn't be passing the disabled status via an input, but via the control structure.

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions