formControlName must be used with a parent

This error message is signaling that a formGroup directive must be used in conjunction with the formControlName directive, which links a specific form control to a form group. This is probably a bug in the template of your component. In other words, the formGroup directive should be passed a FormGroup instance, and the formControlName directive should be positioned inside an element that also has a formGroup directive.

Full error related to this error:

Error: NG01050: formControlName must be used with a parent formGroup directive. You’ll want to add a formGroup directive and pass it to an existing FormGroup instance (you can create one in your class)

You need to make sure that you are not missing the formGroup in your HTML while using formControlName and the formGroup, formControlName fields should be wired in the component of that template.

Here is an illustration of what your template might resemble:

<form [formGroup]="yourFormGroup">
  <input formControlName="yourControl">
</form>

In this illustration, a FormGroup instance named “yourFormGroup” is supplied to the form element through the formGroup directive. In the “yourFormGroup” FormGroup, the input element includes a formControlName directive that links it to a control with the name “yourControl.”

Be sure the class component is importing the ReactiveFormsModule from @angular/forms and adding it to the imports array of the @NgModule as well.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
  ...
  ...
})
export class YourModule { }

The form group must also be created in your component class.

import { FormGroup, FormControl } from '@angular/forms';

export class YourComponent {
  yourFormGroup = new FormGroup({
    yourControl: new FormControl()
  });
}

Above, the code creates a reactive form. It imports classes from the “@angular/forms” module to make use of reactive capabilities. With that, a “FormGroup” instance is created and assigned to a property called “yourFormGroup”, which has a single key-value pair: “yourControl”: a new instance of “FormControl”. A “FormGroup” is used to group multiple “FormControl” instances together to create a form. A “FormControl” represents an individual form control, such as an input element.

You should be able to fix the “NG01050: formControlName must be used with a parent formGroup directive” error by using the steps listed above.