Angular：访问投影的 FormGroup

Question

我想创建一个基本表单组件，它将对所有其他表单有额外的控制。

例如，当用户想要关闭表单时，我想检查表单是否脏。

这是我的基本组件表单示例：

@Component({
  selector: 'my-modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.scss']
})
export class ModalFormComponent implements OnInit, AfterContentInit {

  @ContentChild(FormGroup, { static: false }) usersForm: FormGroup;

  constructor() { }

  ngOnInit(): void {
    console.log(this.usersForm);
  }
  ngAfterContentInit() {
    console.log(this.usersForm);
  }
}

这是用法示例：

<my-modal-form>
  <form [formGroup]="profileForm">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />
  </form>
</my-modal-form>

所以这两个console.log电话都给了我undefined。在这里我想访问FormGroup实例，以便我可以检查它是否脏。

问题是 - 如何正确获取投影表单（FormGroup）？

Answer 1

使用ControlContainer替代似乎有效*：

斯塔克闪电战

import { Component, ContentChild, OnInit, AfterContentInit } from '@angular/core';
import { ControlContainer, FormGroup } from '@angular/forms'

@Component({
  selector: 'modal-form',
  template: `
    <ng-content></ng-content>
  `
})
export class ModalFormComponent implements OnInit, AfterContentInit {

  @ContentChild(ControlContainer, { static: true }) formGroup: FormGroup;

  constructor() { }

  ngOnInit(): void {
    console.log(this.formGroup.value); // null
  }

  ngAfterContentInit() {
    console.log(this.formGroup.value); // {firstName: "", lastName: ""}
    this.formGroup.valueChanges.subscribe(console.log)
  }
}

*警告 - 我没有尝试过这种方法，所以无法评估它的可行性。如果可行的话，也许OP可以评论/回答下线帖子？