能否使用ContentChild查询任意组件以获取子元素的FormControl实例？

方案1：直接查询NgControl指令（最通用，适配所有表单元素） #

Angular 中所有绑定了[formControl]/formControlName的表单元素（包括原生输入框、PrimeNG 封装的表单组件），都会关联内置的NgControl指令实例，该实例的control属性就是你需要的FormControl引用。
你只需要在FieldWrapperComponent中通过ContentChild查询NgControl即可：

import { ContentChild, NgControl, Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'field-wrapper',
  template: `<!-- 你的包装器自定义模板 -->`
})
export class FieldWrapperComponent {
  // 查询第一个子内容中关联的NgControl实例
  @ContentChild(NgControl) controlDir: NgControl;

  ngAfterContentInit() {
    if (this.controlDir) {
      // 直接拿到FormControl实例
      const formControl = this.controlDir.control as FormControl;
      // 后续校验提示、状态同步等逻辑都可以基于这个实例实现
    }
  }
}

这个方案不需要适配 PrimeNG 不同的组件类型，只要是 Angular 响应式表单绑定的元素都能识别到。

方案2：多内容投影兼容复杂场景 #

如果你的包装器内部可能有多个表单元素，或者有嵌套结构，可以调整为ContentChildren查询所有NgControl，按业务逻辑取对应的实例：

import { ContentChildren, QueryList, NgControl } from '@angular/core';

@Component({
  selector: 'field-wrapper',
  template: `<!-- 你的包装器自定义模板 -->`
})
export class FieldWrapperComponent {
  @ContentChildren(NgControl) controlList: QueryList<NgControl>;

  ngAfterContentInit() {
    // 遍历所有子表单控件
    this.controlList.forEach(controlDir => {
      console.log(controlDir.control);
    })
    // 动态渲染的表单元素可以监听changes事件更新
    this.controlList.changes.subscribe((newList) => {
      // 处理动态新增/删除的表单控件
    })
  }
}

方案3：显式传递FormControl（兜底方案） #

如果遇到极端场景无法通过查询拿到，也可以在包装器上加一个输入项显式传入，使用时只需要多绑定一次即可：

// 包装器代码
@Input() formControl: FormControl;

使用模板：

<field-wrapper [formControl]="username">
  <input pInputText [formControl]='username'>
</field-wrapper>

之前查询失败的常见原因 #

• 之前你可能是查询具体的组件类（比如InputText），不同PrimeNG表单组件类不一样，自然无法通用
• 如果是用了*ngIf动态渲染的元素，需要监听QueryList的changes事件动态获取实例

内容的提问来源于stack exchange，提问作者skzryzg