재귀 각도 양식에서 ngIf를 사용하여 경로로 컨트롤을 찾을 수 없음

다음은 아래 코드에 대한 stackblitz 입니다. FormArrays 및 자식 구성 요소를 사용하여 상당히 복잡하고 깊이 중첩 된 Angular 양식을 만들고 있습니다. 대부분의 경우 모든 것이 예상대로 작동합니다. group개체가 포함되어 conjunctor, conditions[]및 groups[]. groups[]동일한 객체를 포함하여 무한 중첩 될 수있는 중첩 그룹입니다.

현재 "그룹 추가", "중첩 된 그룹 추가", "조건 추가", "그룹 삭제"및 "조건 삭제"옵션이있어 중첩 된 양식 객체를 만듭니다. 이를 위해 앱은 세 가지 구성 요소로 분할됩니다.

AppComponent : ng-containers로 기본 양식을 보유 *ngFor하고 그룹을 반복합니다.

GroupControlComponent : AppComponent 내부의 각 항목의 논리를 보유하고 AppComponent와 동일한 작업을 수행하지만 조건 및 중첩 그룹에 대해

ConditionForm : 조건 항목의 논리를 보유합니다.

그리고 이벤트를 내보내고 그룹과 조건을 추가 및 제거하는 버튼을 보유하는 ActionsButtonsBarComponent가 있습니다.

나는 매 두 번째 그룹마다 그것을 만들려고 노력하고 있습니다. Conjunctor에 대한 입력이 있습니다. 첫 번째 인스턴스가 항상 null이되기를 원하기 때문에 첫 번째 인스턴스에서는 전혀 원하지 않습니다. 그러나 두 번째 및 그 이후 인스턴스에서 "AND"또는 "OR"옵션을 제공하는 conjunctor 입력이 나타나기를 원합니다. 이것을 만들 ERROR: Cannot find control with path: 'statement → groups → 1 → conjunctor때 AppComponent에서 오는 오류가 발생 합니다.

AppComponent의 모양은 다음과 같습니다.

<form [formGroup]="_form">
    <ng-container formGroupName="statement">
        <ng-container formArrayName="groups">
            <ng-container *ngFor="let group of _groupsFormArray?.controls; index as i">
         <div *ngIf="i > 0">
           <div [formGroupName]="i">
             <input type="text" formControlName="conjunctor">
           </div>
         </div>
            <app-group-control 
             (remove)="_delete(i)"
             [formControlName]="i"
             [formLabel]="'Group '+ (i + 1) + ':'">
            </app-group-control>
            </ng-container>
        </ng-container>
    </ng-container>
</form>

보시다시피 divngIf 논리를 포함하는이 있습니다.

<div *ngIf="i > 0">
  <div [formGroupName]="i">
    <input type="text" formControlName="conjunctor">
  </div>
</div>

이 방법은 작동하지 않지만 내가 시도한 다른 방법은 없습니다.

지금까지, 나는에 FormGroupName 여러 번 변경 시도 groups, statements, i, index, 아니 개선의 결과로.

또한 템플릿 ref를 사용 ngFor하여을 사용하여 AppComponent에서 각 인스턴스를 추적 @ViewChildren('templateRef') templateRefVar: QueryList<ElementRef>;한 다음 내부 에서 추적 해 보았습니다 . 거기에서를 사용하여 자식 구성 요소 에 전달한 다음 ngIf 내부를 사용합니다. 이것은 내가 얻은 가장 가까운 것이지만 문제는 ngIf 조건이 충족 될 때마다 첫 번째를 포함하여 그룹 배열의 모든 인스턴스에 나타나고 오류가 발생한다는 것 입니다.. 이 방법을 사용하여 가장 가까운 StackBlitz가 있습니다. 그리고 여기 에 위 코드 의 StackBlitz가 있습니다.ngFor#templateReftemplateRef.lengthGroupControlComponent@Input() groupInstancesExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '0'. Current value: '1'.

이 재귀 양식에 대해 더 자세히 알고 싶다면 여기에서 읽을 수 있습니다.