Angular - FormArrayName в подкомпонентах

Question

У меня есть три компонента:

1. согласие
2. Согласие-Scope список
3. согласие-Scope пункт

consent содержит FormGroup, который содержит два FormArray с.

consentForm = this.fb.group({
  identityScopes: this.fb.array([]),
  resourceScopes: this.fb.array([])
});

get identityScopes(): FormArray {
  return this.consentForm.get("identityScopes") as FormArray;
}
get resourceScopes(): FormArray {
  return this.consentForm.get("resourceScopes") as FormArray;
}

И это consent шаблон компонента:

<form *ngIf="configuration" [formGroup]="consentForm">
    <app-consent-scope-list class="scope-list"
                            [list]="configuration.identityScopes"
                            [title]="'Personal Information'"
                            [group]="consentForm"
                            [array]="identityScopes">
    </app-consent-scope-list>
    <app-consent-scope-list class="scope-list"
                            [list]="configuration.resourceScopes"
                            [title]="'Application Access'"
                            [group]="consentForm"
                            [array]="resourceScopes">
    </app-consent-scope-list>
</form>

Я передаю FormGroup из формы согласия в consent-scope-list компонент, как указано в этом сообщении: https://stackoverflow.com/a/46452897/2555957.

Объявление компонента consent-scope-item:

export class ConsentScopeListComponent implements OnInit {
  @Input() title: string;
  @Input() list: Array<Scope>;
  @Input() group: FormGroup;
  @Input() array: FormArray;

  constructor(private readonly fb: FormBuilder) { }

  ngOnInit(): void {
    for (let i = 0; i < this.list.length; i++) {
      const item = this.list[i];
      this.array.push(this.fb.control(item.checked));
    }
  }
}

И шаблон для consent-scope-list:

<div class="panel panel-bordered panel-primary" *ngIf="list && list.length" [formGroup]="group">
  <div class="panel-heading">
    <h3 class="panel-title">{{title}}</h3>
  </div>
  <div class="panel-body" [formArrayName]="array">
      <app-consent-scope-item *ngFor="let entry of list; index as i; first as isFirst; last as isLast"
                              [item]="entry"
                              [isFirst]="isFirst"
                              [isLast]="isLast"
                              [index]="i">
      </app-consent-scope-item>
  </div>
</div>

Наконец, объявление компонента consent-scope-item:

export class ConsentScopeItemComponent {
  @Input() item: Scope;
  @Input() formControl: AbstractControl;
  @Input() isFirst: boolean;
  @Input() isLast: boolean;
  @Input() index: number;
}

И шаблон для consent-scope-item:

<div class="checkbox">
  <input class="magic-checkbox"
         type="checkbox"
         [value]="item.name"
         [checked]="item.checked"
         [disabled]="item.required"
         [formControlName]="index"
         [id]="'consent_' + index + item.name + item.displayName"/>
  <label [for]="'consent_' + index + item.name + item.displayName">{{item.displayName}}
  </label>
</div>

Я получаю сообщение об ошибке во время выполнения в consent-scope-list о том, что он не может найти formGroup:

ERROR Error: Cannot find control with name: '[object Object]'
    at _throwError (forms.js:1790)
    at setUpFormContainer (forms.js:1772)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addFormArray (forms.js:4716)
    at FormArrayName.push../node_modules/@angular/forms/fesm5/forms.js.FormArrayName.ngOnInit (forms.js:4956)
    at checkAndUpdateDirectiveInline (core.js:18620)
    at checkAndUpdateNodeInline (core.js:19884)
    at checkAndUpdateNode (core.js:19846)
    at debugCheckAndUpdateNode (core.js:20480)
    at debugCheckDirectivesFn (core.js:20440)
    at Object.eval [as updateDirectives] (ConsentScopeListComponent.html:5)

Answer 1

Я только что попытался воспроизвести ошибку, которую вы подняли, и попытался ее решить, я смог ее решить, не могли бы вы взглянуть на нее, https://stackblitz.com/edit/form-array-subcomponents