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

你没有在任何地方初始化 usersForm 这就是你被定义的原因。当我检查你的模板时，你有 profileForm 而不是 usersForm。

您应该更正此 <form [formGroup]="usersForm"> 而不是 <form [formGroup]="profileForm">

Answer 2

改用 ControlContainer 似乎可行*:

Stackblitz

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 可以评论/回答 post 下线？

Angular：获得对投影 FormGroup 的访问权限

Angular: get access to projected FormGroup

forms

projection

angular

Stackblitz