可重用子组件中的角反应形式:FormArrays问题:"formGroupName"必须与父formGroup指令一起使用

我正在尝试在一个示例上描述问题(关于stackblitz的完整示例)

I'am trying to describe the problem on an example (full example on stackblitz)

如果我尝试将反应形式的某些部分以带有子组件的简单"formControls"或"formGroups"的形式放置，则没有问题.(请参阅上面关于stackblitz的示例). FormGroupDirective 可以正常工作.

If I try to place some parts of reactive-form in the form of simple "formControls" or "formGroups" withing child-components, there are no problems. (See the example on stackblitz above). FormGroupDirective works as expected.

但是，如果我尝试将FormArray放置在子组件中，则会因为以下原因而遇到麻烦:

But If I try to place a FormArray within a child-component, I get troubles because of:

<div [formGroupName]="i">
  <!--
    Error: formGroupName must be used 
    with a parent formGroup directive.
  -->
<div>

反应形式是一种简单的形式:

The Reactive-Form is a simple form:

  ngOnInit () {
    this.newForm = this.fb.group({
      id: [{value: '4711', disabled: this.idReadOnly}, Validators.required],
      chapter: this.fb.group({
        name: ['Some Chapter', Validators.required]
      }),
      faq: this.fb.array(this.faqArray)
    });
  }

如上所述， id 和 chapter 没有问题，它们在custom-child-components中实现，例如:

As already mentioned above there are no problems with id and chapter, they are implemented in custom-child-components, like:

<fe-input 
  [controlPath]="['id']"
  placeholder="Child-FormControl ID"
></fe-input>

<my-form-group 
[controlPath]="['chapter', 'name']"
placeholder="Child-FormGroup Chapter"
[required]="true"
>
</my-form-group>

在stackblitz的应用程序中，您将看到工作部件"ID"和章".

In the App on stackblitz you will see the working parts 'ID' and 'Chapter'.

与 formArray 相同的方法:

<my-form-array 
[controlPath]="['faq']" 
placeholder="Child-FormArray FAQ"
[required]="true"
></my-form-array>

应该按我的预期工作，但是< div [formGroupName] ="i"> 部分仅在子组件内导致上面已经提到的错误:

should work as expected to my mind but the part <div [formGroupName]="i"> causes only within a child-component the already mentioned error above:

Error: formGroupName must be used 
with a parent formGroup directive.

如果我在原始文件中使用了它(定义了反应形式)，那么它将正常工作.

If I use that in the original file (where is the reactive form is defined), it works without problems.

我很困惑，也许我只是忽略了一个简单的问题?有人能帮我吗?整个示例可在此处在线获取:( >> stackblitz )

I'm confused, maybe I just overlook a simple problem? Can someone help me? The whole example is available online here: ( >> stackblitz)

更新1:

我已经将@yurzui的解决方案与

I've integrated the solution from @yurzui with

viewProviders: [{ 
  provide: ControlContainer, 
  useExisting: FormGroupDirective 
}]

，错误"错误:必须使用formGroupName .. "消失.之后，我为formArray字段集成了自定义组件，它们无法获取控件值.我想我已经接近解决方案了.这是自定义组件:

and the error "Error: formGroupName must be used.." is disappeared. Afterwards, I've integrated the custom component for formArray fields and they cannot get the control value. I think I'm close to the solution. That's the custom component:

import { Component, OnInit, Input } from '@angular/core';
import {
  FormControl,
  FormGroupDirective
} from '@angular/forms';

@Component({
  selector: 'fe-input',
  template: `
    <mat-form-field>
      <input
        matInput
        [placeholder]="placeholder"
        [formControl]="control"
        [required]="required"
      />
      <mat-error>
        This is a required field!
      </mat-error>
    </mat-form-field>
  `,
  styles: [

  ]
})
export class FormElementInputComponent implements OnInit {
  // Values to be set:
  @Input() controlPath: any;
  @Input() placeholder: string;
  @Input() controlValue: any;
  @Input() required = false;

  // That's the reuseable control
  control: FormControl;

  constructor(private fgd: FormGroupDirective) {}

  ngOnInit() {
    this.control = this.fgd.control.get(
      this.controlPath
    ) as FormControl;
  }
}

最后，这是 my-form-array 的模板部分:

And finally that's the template part of my-form-array:

 template: `
  <div fxLayout="column">
    <div *ngFor="let c of control.controls; index as i">

      <div [formGroupName]="i">

        <fe-input 
        [controlPath]="q"
        placeholder="Question"
        [required]="required"
      ></fe-input>

      <fe-input 
        [controlPath]="a"
        placeholder="Answer"
        [required]="required"
      ></fe-input>
      <div>

    </div>
  </div>
  `,