如何使用 FormGroupDirective 将控件添加到子组件中的子表单？

Question

我正在尝试从子组件向 formGroupName 添加控件并订阅 formGroupName 上的更改。这就是我所拥有的（请注意，我愿意接受更好的方法）：

Parent/App 组件 HTML:

<form [formGroup]="mainForm">
  <p>Main</p>
  <input type="text" formControlName="mainInput" />
  <div formGroupName="childForm">
    <app-child></app-child>
  </div>
</form>

Parent/App 组件 TS:

export class AppComponent implements OnInit {
  mainForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.mainForm = this.fb.group({
      mainInput: [''],
      childForm: this.fb.group({
        childInput: [''],
      }),
    });

    this.mainForm
      .get('childForm')
      .valueChanges.subscribe((data) => console.log(data));
  }
}

子组件 HTML:

<div formGroupName="subSubForm">
  <p>Child</p>
  <input type="text" formControlName="childInput" />
</div>

子组件 TS：

export class ChildComponent implements OnInit {
  constructor(private fgd: FormGroupDirective, private fb: FormBuilder) {}

  ngOnInit() {
    let form = this.fb.group({
      selected: [false],
    });
    this.fgd.form.addControl('childTest', form);
  }
}

在子组件TS中，我希望能够做的是获取formgroupname并向其添加控件。所以 this.fgd.form.get('childForm').addControl('childTest', form) 但 addControl 在 get 上不存在。

StackBlitz

Answer 1

如果不包含在 formGroup 中，则不能使用 formGroupName（请参阅控制台中的错误）。

所以，声明一个变量

subSubForm:FormGroup

然后，在 ngOnInit 中使用

  ngOnInit() {
    ...
    this.subSubForm=this.fgd.form.get('childForm') as FormGroup
    ...
  }

并在.html

<!--see that use [FormGroup] -->
<div [formGroup]="subSubForm">
  <p>Child</p>
  <input type="text" formControlName="childInput" />
</div>

Answer 2

You must add 

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

in child component.

Example: [here](https://stackblitz.com/edit/angular-ivy-qpaihe)

如何使用 FormGroupDirective 将控件添加到子组件中的子表单？

How to add controls to a sub form in child component using FormGroupDirective?

angular

StackBlitz