Angular14：如何用ContentChild查询支持FormControl的表单组件

完全可以实现这个功能，核心思路是利用Angular表单体系中的抽象基类NgControl来查询所有关联了表单控件的子元素或组件。

关键原理 #

所有使用formControl或formControlName指令的元素/组件，都会被Angular的FormControlDirective或FormControlNameDirective装饰，而这两个指令都继承自抽象类NgControl。通过查询NgControl，就能统一获取到任意符合要求的表单控件实例。

修改后的FormField组件代码 #

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

@Component({
  selector: 'form-field',
  template: `
    <label>{{label}}</label>
    <ng-content></ng-content>
    <div class="error-message" *ngIf="error">{{error}}</div>
  `,
  styles: [],
})
export class FormFieldComponent implements AfterContentInit {
  // 查询内容投影中的NgControl实例
  @ContentChild(NgControl) formControl!: NgControl;

  @Input() label!: string;
  error: string = "";

  ngAfterContentInit() {
    // 监听控件状态变化，更新错误信息
    this.formControl.statusChanges?.subscribe(() => {
      this.updateErrorMessage();
    });
  }

  private updateErrorMessage() {
    const control = this.formControl.control;
    if (!control || !control.errors || control.pristine) {
      this.error = "";
      return;
    }

    // 根据错误类型自定义错误信息，这里示例简单处理
    if (control.errors['required']) {
      this.error = '此字段为必填项';
    } else if (control.errors['minlength']) {
      this.error = `最少需要输入${control.errors['minlength'].requiredLength}个字符`;
    }
    // 可扩展更多错误类型的处理
  }
}

自定义组件的适配要求 #

对于像custom-multiselect这样的自定义表单组件，只需满足以下两点就能被正确识别：

• 实现ControlValueAccessor接口，完成与Angular表单体系的双向绑定适配
• 在使用时绑定formControl或formControlName指令

使用示例（保持原方式即可） #

<form-field label="用户名">
  <input formControlName="username">
</form-field>
<form-field label="兴趣爱好">
  <custom-multiselect formControlName="hobbies"></custom-multiselect>
</form-field>

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