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

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.

[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.