Unhelpful error: Cannot read properties of null (reading '_rawValidators')

[arobinson]

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

forms

Is this a regression?

No

Description

Error thrown: Cannot read properties of null (reading '_rawValidators')

This does not tell the user where the issue is (what component), nor what the invalid form control name is. There is better handling when production mode is not on, but this doesn't help when we are trying to debug an issue that is in our production environment and do not know how to reproduce the issue.

We log unhandled errors to DataDog and when we get this error, there is pretty much nothing we can do to take action on it or fix it since there is no useful information provided in the stack trace.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-cgg4uh?file=src%2Fapp%2Fforms%2Fforms.component.html

Please provide the exception or error you saw

TypeError: Cannot read properties of null (reading '_rawValidators')
    at getControlValidators (@angular_forms.js?v=a1e73860:721:18)
    at setUpValidators (@angular_forms.js?v=a1e73860:2545:22)
    at setUpControl (@angular_forms.js?v=a1e73860:2500:3)
    at _FormGroupDirective.addControl (@angular_forms.js?v=a1e73860:4087:5)
    at _FormControlName._setUpControl (@angular_forms.js?v=a1e73860:4611:39)
    at _FormControlName.ngOnChanges (@angular_forms.js?v=a1e73860:4560:12)
    at _FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (chunk-H7PDWKI7.js?v=a1e73860:5775:10)
    at callHookInternal (chunk-H7PDWKI7.js?v=a1e73860:6341:10)
    at callHook (chunk-H7PDWKI7.js?v=a1e73860:6359:5)
    at callHooks (chunk-H7PDWKI7.js?v=a1e73860:6330:9)

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

Angular CLI: 17.3.8
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 17.3.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.8
@angular-devkit/build-angular   17.3.8
@angular-devkit/core            17.3.8
@angular-devkit/schematics      17.3.8
@angular/cli                    17.3.8
@schematics/angular             17.3.8
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.8

Anything else?

No response

[arobinson]

Looks to have already been reported in the past: #48379
But that was closed. I have created a stackblitz to reproduce the issue.

[arobinson]

Here is the helpful error that is not thrown when production mode is turned on (taken from the deployed JavaScript):

function setUpControl(control, dir, callSetDisabledState = setDisabledStateDefault) {
  if (typeof ngDevMode === "undefined" || ngDevMode) {
    if (!control)
      _throwError(dir, "Cannot find control with");
    if (!dir.valueAccessor)
      _throwMissingValueAccessorError(dir);
  }
  setUpValidators(control, dir);
...

[JeanMeche]

Is it on purpose that the formControlName (c) doesn't exist ?

  @if ( recreateBug() ) {
  <label>
    Control c:
    <input type="text" formControlName="c" />
  </label>
  }

While you definition is

  #createFormGroup(): FormGroup {
    return new UntypedFormGroup({
      a: new FormControl('a'),
      b: new FormControl('b'),
    });
  }

[arobinson]

Yes, that is the issue, it throws an error with no information when it hits a form control with the wrong name.

In our case, our form controls are created dynamically from database information. In our crash logs in DataDog, we logged this error, but the problem is that we don't have any information on what form control name was used, what part of our application the user was in, etc. Unfortunately this means that we cannot fix the problem without more information.

[arobinson]

Here is a link to the diagnostic error that is only thrown in dev mode:

angular/packages/forms/src/directives/shared.ts

Line 70 in d73a374

if (typeof ngDevMode === 'undefined' || ngDevMode) {

[JeanMeche]

Oh I see, one of the problem is that we strip error messages in prod builds and only log the error code so that wouldn't help you very much.
We only log issue in error mode to keep the prod bundle as small as possible.

[arobinson]

Yes, that is it. It isn't an Angular bug, I'm just requesting aid in finding the source of the problem when the issue occurs. It would be extremely helpful to know the component that has the template with the formControlName directive that was passed a bad value (or a timing issue when the form control may not have yet been created by dynamically created forms)

[JoostK]

Any information that may be useful for debugging is intentionally designed to be removed in production builds as to not impact the bundle size, so I don't think error messages can be improved in production.

[arobinson]

Note that this is not a production build, but rather it is in production mode.

[JeanMeche]

This is the same, the prod flag skips the debugging code (which is then removed by DCE).