Improve error message "No value accessor for form control with unspecified name attribute" to suggest what to do to fix the issue

[zlepper]

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

forms

Description

When you get the error No value accessor for form control with unspecified name attribute, there are generally two things that possibly has gone wrong:

You are using ngModel with a third party control that doesn't register a NG_VALUE_ACCESSOR. In this case you need to use ngDefaultControl on the element.

Alternatively you have forgotten to register a NG_VALUE_ACCESSOR for your custom form input:

providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyInputField),
      multi: true
    }
  ]
  

Proposed solution

It would be very nice if the error message Angular generated would actually suggest on of those things as being the actually problem, and thus what you should probably do to fix it, in the error message.

Alternatives considered

I mean, Angular could just leave it as is, and people can keep using Google I guess, though that is a suboptimal solution in my opinion.

[KurtGokhan]

It can also happen when you forgot to import the component's module. I think the error message should be improved for clarity.

[piyushdanej]

It can also happen when you forgot to import the component's module. I think the error message should be improved for clarity.

Thanks a ton !
I was having this exact same issue in my test case where my component's template had a component from shared module .
Just had to import shared module in my test case.

[lufo88ita]

Hi,
It also happens when you put a ngModel on a html element that cannot have a value (of course is an error on my side)

In my case this happens:

<div  [(ngModel)]="myModel"> <--- my error, I want to put it inside the select
    <select>
         <!-- code not relevant -->
    </select>
</div>

The error message does not help me and is very confusing because I do not use form tag in this context.

[mikebellcoder]

I just ran into this error occurring as output for a failing test.
In the component with a failing test I used a custom form control (another component) which itself uses the NG_VALUE_ACCESSOR custom form control API.

The solution was to add the missing custom form component to the Testbed.configureTestingModule component declarations for the component I'm trying to test and the error went away.

Noting this here as another scenario where this error can be seen and not understood.

[LoaderB0T]

I came across this error under fairly specific circumstances while migrating an angular project to Nx with Module Federation. Just in case anyone comes across this issue with a similar situation.

I have a shared library that declares a custom control with the NG_VALUE_ACCESSOR and ControlValueAccessor mechanics that is used in different Module-Federation-enabled apps in my workspace.

Worked fine at first but when I declared in the webpack.config.js that the shared library should actually be shared and not be included twice the controls broke with the mentioned very unhelpful error message:

sharedMappings.register(tsConfigPath, ['@myapp/shared', ...]) 
//                                       ^-- added shared lib to the sharedMappings declaration 
//                                           of '@angular-architects/module-federation'

In my case, the root cause of this error was that I did not share the @angular/forms package in the webpack.config.js
To fix edit your webpack.config.js files from all affected apps:

module.exports = {
...
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
         ...
      },
      shared: share({
        '@angular/forms': { // <-- This was missing
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true
        },
        ...
      }),
      ...
    }),
    ...
  ]
};

I know this is very specific, but still, the error message did not lead me anywhere useful :)
So would be cool if the message would give a better hint at what is broken.

[marleypowell]

I came across this error under fairly specific circumstances while migrating an angular project to Nx with Module Federation. Just in case anyone comes across this issue with a similar situation.

I have a shared library that declares a custom control with the NG_VALUE_ACCESSOR and ControlValueAccessor mechanics that is used in different Module-Federation-enabled apps in my workspace.

Worked fine at first but when I declared in the webpack.config.js that the shared library should actually be shared and not be included twice the controls broke with the mentioned very unhelpful error message:

sharedMappings.register(tsConfigPath, ['@myapp/shared', ...]) 
//                                       ^-- added shared lib to the sharedMappings declaration 
//                                           of '@angular-architects/module-federation'

In my case, the root cause of this error was that I did not share the @angular/forms package in the webpack.config.js To fix edit your webpack.config.js files from all affected apps:

module.exports = {
...
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
         ...
      },
      shared: share({
        '@angular/forms': { // <-- This was missing
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true
        },
        ...
      }),
      ...
    }),
    ...
  ]
};

I know this is very specific, but still, the error message did not lead me anywhere useful :) So would be cool if the message would give a better hint at what is broken.

Thanks for this. This was exactly the problem I had :)

[JimiSweden]

just adding my issue and resolution (add ngDefaultControl):
Using mat-buton with [formControl]="control", inside ng-template.

This works in another project (angular 12.2.3) but not in this 13.3.0. (not sure if it has to do with that...

the code, works with ngDefaultControl but not without it,
adding a name to the button didn't solve the issue either

 <ng-template #filterButtonsStepper let-control="control">

       <button mat-icon-button [formControl]="control" ngDefaultControl
      (click)="filterButtonsStepperAdvance(control)">
      <mat-icon class="green-icon" *ngIf="control.value == 'true'">
        check_circle_outline
      </mat-icon>
     <!-- more icons... -->
    </button>
  </ng-template>

     <!-- using the template -->
<ng-template [ngTemplateOutlet]="filterButtonsStepper"
                [ngTemplateOutletContext]="{control: filerFormControls.availableForBooking}"></ng-template>

[matew17]

Thank you so much !!,

You just saved me hours of debugging, I had the exact same error.

I came across this error under fairly specific circumstances while migrating an angular project to Nx with Module Federation. Just in case anyone comes across this issue with a similar situation.

I have a shared library that declares a custom control with the NG_VALUE_ACCESSOR and ControlValueAccessor mechanics that is used in different Module-Federation-enabled apps in my workspace.

Worked fine at first but when I declared in the webpack.config.js that the shared library should actually be shared and not be included twice the controls broke with the mentioned very unhelpful error message:

sharedMappings.register(tsConfigPath, ['@myapp/shared', ...]) 
//                                       ^-- added shared lib to the sharedMappings declaration 
//                                           of '@angular-architects/module-federation'

In my case, the root cause of this error was that I did not share the @angular/forms package in the webpack.config.js To fix edit your webpack.config.js files from all affected apps:

module.exports = {
...
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
         ...
      },
      shared: share({
        '@angular/forms': { // <-- This was missing
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true
        },
        ...
      }),
      ...
    }),
    ...
  ]
};

I know this is very specific, but still, the error message did not lead me anywhere useful :) So would be cool if the message would give a better hint at what is broken.

[pkozlowski-opensource]

Minimal reproduction: https://stackblitz.com/edit/angular-ivy-3lbs6q?file=src%2Fapp%2Fapp.component.ts

[dylhunn]

Thank you to everyone who commented, @zlepper @KurtGokhan @lufo88ita @mikebellcoder @LoaderB0T. I have opened #47969 to link this error message to a guide with debugging suggestions. (Feel free to comment on the PR or edit the guide if you come up with other cases or want to improve it further.) The error code and guide will begin showing up in v15.0.1.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}