`formControlName`에 해당하는 컨트롤 누락

템플릿의 formControlName이 FormGroup에 없는 컨트롤을 가리킵니다. 디렉티브가 경로를 따라 컨트롤을 찾지만 해당 컨트롤이 없습니다.

같은 데이터로 템플릿과 폼 그룹을 구성하면서 서로 다른 필터를 적용하면 이런 문제가 발생할 수 있습니다. 템플릿에는 항목을 렌더링했지만 폼 그룹에는 해당 컨트롤을 만들지 않았기 때문에, formControlName이 바인딩할 대상을 찾을 수 없는 것입니다.

@Component({
  template: `
    <form [formGroup]="form">
      <ng-container formGroupName="options">
        @for (id of visibleIds; track id) {
          <input [formControlName]="id" />
        }
      </ng-container>
    </form>
  `,
})
class App {
  // 템플릿은 두 id에 대한 입력 필드를 모두 렌더링하지만...
  visibleIds = [1, 2];
  // ...폼 그룹에는 id가 1인 컨트롤만 있습니다.
  form = new FormGroup({
    options: new FormGroup({
      1: new FormControl(''),
    }),
  });
}

오류 디버깅

오류 메시지에는 해당 계층에 실제로 존재하는 컨트롤이 표시됩니다. 예를 들면 다음과 같습니다:

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

이 목록을 템플릿에서 바인딩하는 이름과 비교하세요. 그런 다음 누락된 컨트롤을 FormGroup에 추가하거나, 컨트롤이 없는 항목의 formControlName을 더 이상 렌더링하지 않도록 수정하세요.