refactor(forms): added control name in console errors (#55397)

fdonzello · AndrewKushnir · commit c001b05c771e · 2024-04-23T15:16:57.000-07:00
When a formControlName is used without a parent formGroup, an error is logged in the console. Before this commit, there was no information about which control had the issue. Now, it's reported and the troubleshoot is much faster. PR Close #55397
diff --git a/packages/forms/src/directives/reactive_directives/form_control_name.ts b/packages/forms/src/directives/reactive_directives/form_control_name.ts
@@ -221,7 +221,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
         !(this._parent instanceof FormGroupDirective) &&
         !(this._parent instanceof FormArrayName)
       ) {
-        throw controlParentException();
+        throw controlParentException(this.name);
       }
     }
   }
diff --git a/packages/forms/src/directives/reactive_errors.ts b/packages/forms/src/directives/reactive_errors.ts
@@ -17,18 +17,30 @@ import {
   ngModelGroupExample,
 } from './error_examples';
 
-export function controlParentException(): Error {
+export function controlParentException(nameOrIndex: string | number | null): Error {
   return new RuntimeError(
     RuntimeErrorCode.FORM_CONTROL_NAME_MISSING_PARENT,
-    `formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
+    `formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).
 
+      ${describeFormControl(nameOrIndex)}
+
     Example:
 
     ${formControlNameExample}`,
   );
 }
 
+function describeFormControl(nameOrIndex: string | number | null): string {
+  if (nameOrIndex == null || nameOrIndex === '') {
+    return '';
+  }
+
+  const valueType = typeof nameOrIndex === 'string' ? 'name' : 'index';
+
+  return `Affected Form Control ${valueType}: "${nameOrIndex}"`;
+}
+
 export function ngModelGroupException(): Error {
   return new RuntimeError(
     RuntimeErrorCode.FORM_CONTROL_NAME_INSIDE_MODEL_GROUP,
diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
@@ -3881,11 +3881,65 @@ describe('reactive forms integration tests', () => {
         `,
         },
       });
+
       const fixture = initTest(FormGroupComp);
+      expect(() => fixture.detectChanges()).toThrowMatching((e: Error) => {
+        if (!e.message.includes(`formControlName must be used with a parent formGroup directive`)) {
+          return false;
+        }
 
-      expect(() => fixture.detectChanges()).toThrowError(
-        new RegExp(`formControlName must be used with a parent formGroup directive`),
-      );
+        if (!e.message.includes(`Affected Form Control name: "login"`)) {
+          return false;
+        }
+
+        return true;
+      });
+    });
+
+    it('should throw if formControlName, with an index, is used without a control container', () => {
+      TestBed.overrideComponent(FormGroupComp, {
+        set: {
+          template: `
+            <input type="text" [formControlName]="0">
+          `,
+        },
+      });
+
+      const fixture = initTest(FormGroupComp);
+      expect(() => fixture.detectChanges()).toThrowMatching((e: Error) => {
+        if (!e.message.includes(`formControlName must be used with a parent formGroup directive`)) {
+          return false;
+        }
+
+        if (!e.message.includes(`Affected Form Control index: "0"`)) {
+          return false;
+        }
+
+        return true;
+      });
+    });
+
+    it('should throw, without indicating the affected form control, if formControlName is used without a control container', () => {
+      TestBed.overrideComponent(FormGroupComp, {
+        set: {
+          template: `
+            <input type="text" formControlName>
+          `,
+        },
+      });
+
+      const fixture = initTest(FormGroupComp);
+      expect(() => fixture.detectChanges()).toThrowMatching((e: Error) => {
+        if (!e.message.includes(`formControlName must be used with a parent formGroup directive`)) {
+          return false;
+        }
+
+        if (e.message.includes(`Affected Form Control`)) {
+          return false;
+        }
+
+        return true;
+      });
     });
 
     it('should throw if formControlName is used with NgForm', () => {

Original file line number	Diff line number	Diff line change
`@@ -221,7 +221,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {`
`221`	`221`	`!(this._parent instanceof FormGroupDirective) &&`
`222`	`222`	`!(this._parent instanceof FormArrayName)`
`223`	`223`	`) {`
`224`		`- throw controlParentException();`
	`224`	`+ throw controlParentException(this.name);`
`225`	`225`	`}`
`226`	`226`	`}`
`227`	`227`	`}`