получение элементов управления массива вложенных форм

Question

У меня есть рабочий код. Но Typescript жалуется.

У меня есть два вложенных массива форм (educationItem, вложенных в education). Я могу создать геттер для доступа к элементам управления FormArray для первого l oop. Но TypeScript не жалуется на этот массив.

get controls(){
return (this.educationForm.get('education') as FormArray).controls
}

Typescript жалуется на второй массив, который вложен в первый. TypeScript не распознает переменную educationItem как FormArray.

Функции-получатели не принимают аргументы, и я не уверен (1), как его типизировать в самом шаблоне, или (2) написать метод получения с educationItem в качестве аргумента (может быть сеттером)

Фрагмент кода следующий

            <div *ngFor="let educationItem of education.controls; index as i">
              <ng-container [formGroupName]="i">
                <ng-container>
                  <ion-button type="button" (click)="addRole(educationItem)">Add Role</ion-button>
                  <div formArrayName="description">
                    <div
                      class="players"
                      *ngFor="let role of educationItem.get('description').controls; let roleIndex = index"
                      [formGroupName]="roleIndex"
                    >
                      <ion-item>
                        <ion-label position="floating">Role title</ion-label>
                        <ion-input formControlName="title"></ion-input>
                      </ion-item>
                    </div>
                  </div>
                </ng-container>


              </ng-container>
            </div>

Answer 1

вы не можете использовать геттер, но вы можете использовать функцию. Я не могу представить вашу json. Если я представлю что-то вроде:

educationForm={
      education:[
      {
       description:[
         {roleIndex:1,...rest of properties},
         {roleIndex:2,...rest of properties},
        ],
       ...rest of properties
      },
      {
       description:[
          {roleIndex:1,...rest of properties},
          {roleIndex:2,...rest of properties},
        ],
        ...rest of properties
       }
       ],
       ...rest of properties
}


getDescription(index:number){
 const group=(this.educationForm.get('education') as FormArray).at(index)
 return (group.get('description') as FormArray)
}

Answer 2

Используйте $ any () функцию, которая отключает проверку типа в шаблоне.

Попробуйте:

         <div *ngFor="let educationItem of education.controls; index as i">
              <ng-container [formGroupName]="i">
                <ng-container>
                  <ion-button type="button" (click)="addRole(educationItem)">Add Role</ion-button>
                  <div formArrayName="description">
                    <div
                      class="players"
                      *ngFor="let role of $any(educationItem).get('description').controls; let roleIndex = index"
                      [formGroupName]="roleIndex"
                    >
                      <ion-item>
                        <ion-label position="floating">Role title</ion-label>
                        <ion-input formControlName="title"></ion-input>
                      </ion-item>
                    </div>
                  </div>
                </ng-container>
              </ng-container>
            </div>