Missing control for formControlName

A formControlName in the template points at a control that the FormGroup does not have. The directive looks the control up by its path and finds nothing.

This can happen when the template and the form group are built from the same data but use different filters. One item is rendered in the template but was never given a control in the form group, so its formControlName has nothing to bind to.

@Component({
  template: `
    <form [formGroup]="form">
      <ng-container formGroupName="options">
        @for (id of visibleIds; track id) {
          <input [formControlName]="id" />
        }
      </ng-container>
    </form>
  `,
})
class App {
  // The template renders an input for both ids...
  visibleIds = [1, 2];
  // ...but the form group only has a control for id 1.
  form = new FormGroup({
    options: new FormGroup({
      1: new FormControl(''),
    }),
  });
}

Debugging the error

The error message lists the controls that do exist at that level, for example:

Cannot find control with path: 'options -> 2'. Controls that do exist at this level: 1.

Compare it with the names your template binds to. Then either add the missing control to the FormGroup, or stop rendering the formControlName for the item that has no control.