Component update failed: NG01050: formControlName must be used with a parent formGroup directive.

[RushilJalal]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I'm new to Angular. This is the code I was working on:

<p>reactive-form works!</p>


<form [formGroup]="form" (ngSubmit)="onSubmit()"></form>
<label for="username">Username
    <input type="text" id="username" formControlName="username">
</label>

import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  imports: [ReactiveFormsModule],
  templateUrl: './reactive-form.component.html',
  styleUrl: './reactive-form.component.css',
})
export class ReactiveFormComponent {
  form = new FormGroup({
    username: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [
      Validators.required,
      Validators.minLength(10),
    ]),
  });

  onSubmit() {
    if (this.form.valid) console.log('Form Submitted', this.form.value);
    else console.log('Invalid Form');
  }
}

I just added the text "Username" to the label in html code above and that's when I got this bug in the terminal.

Minimal Reproduction

1. Create a new component using ng generate component reactive-form
2. Copy the above code into the html and ts files
3. Edit the form input label from 'username' to anything else.
4. Notice the error in the terminal

Packages

"dependencies": {
    "@angular/cdk": "^19.2.10",
    "@angular/common": "^19.2.0",
    "@angular/compiler": "^19.2.0",
    "@angular/core": "^19.2.0",
    "@angular/forms": "^19.2.0",
    "@angular/material": "^19.2.10",
    "@angular/platform-browser": "^19.2.0",
    "@angular/platform-browser-dynamic": "^19.2.0",
    "@angular/router": "^19.2.0",
    "@ngbracket/ngx-layout": "^19.0.0",
    "flex-layout": "^1.0.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.2.8",
    "@angular/cli": "^19.2.8",
    "@angular/compiler-cli": "^19.2.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.7.2"
  }

Exception or Error

Component update failed: NG01050: 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).

      Affected Form Control name: "username"

    Example:


  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });
RuntimeError@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:1577:5
controlParentException@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/@angular_forms.js?v=85bd2f10:1245:10
checkParentType@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/@angular_forms.js?v=85bd2f10:5121:11
_setUpControl@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/@angular_forms.js?v=85bd2f10:5020:22
ngOnChanges@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/@angular_forms.js?v=85bd2f10:4978:28
rememberChangeHistoryAndInvokeOnChangesHook@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:3563:10
callHookInternal@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:4167:10
callHook@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:4185:21
callHooks@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:4156:17
executeInitAndCheckHooks@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:4125:14
refreshView@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:10044:35
recreate@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21281:16
executeWithInvalidateFallback@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21291:5
recreateLView/<@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21286:49
invoke@http://localhost:4200/polyfills.js:301:158
onInvoke@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:5579:25
invoke@http://localhost:4200/polyfills.js:301:46
run@http://localhost:4200/polyfills.js:97:35
run@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:5460:24
recreateLView@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21286:10
recreateMatchingLViews@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21219:18
recreateMatchingLViews@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21232:29
recreateMatchingLViews@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21229:31
recreateMatchingLViews@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21232:29
ɵɵreplaceMetadata@http://localhost:4200/@fs/home/rushil/practice/my-first-angular-app/.angular/cache/19.2.8/my-first-angular-app/vite/deps/chunk-5ZWKBG32.js?v=85bd2f10:21187:31
ReactiveFormComponent_HmrLoad/<@http://localhost:4200/main.js:331:36
invoke@http://localhost:4200/polyfills.js:301:158
run@http://localhost:4200/polyfills.js:97:35
patchPromise/</scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:2005:30
invokeTask@http://localhost:4200/polyfills.js:327:171
runTask@http://localhost:4200/polyfills.js:135:37
drainMicroTaskQueue@http://localhost:4200/polyfills.js:482:23

Please consider reporting the error at https://github.com/angular/angular-cli/issues

Your Environment

Angular CLI: 19.2.8
Node: 22.12.0
Package Manager: npm 11.3.0
OS: linux x64

Angular: 19.2.7
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.8
@angular-devkit/build-angular   19.2.8
@angular-devkit/core            19.2.8
@angular-devkit/schematics      19.2.8
@angular/cdk                    19.2.10
@angular/cli                    19.2.8
@angular/material               19.2.10
@schematics/angular             19.2.8
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0

Anything else relevant?

No response

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