如何将自定义Angular Material控件封装为独立组件？

核心思路 #

你需要让封装的form-field-custom-control-example组件同时实现ControlValueAccessor和MatFormFieldControl接口，这样它既能作为Angular表单控件被formControlName/formControl绑定，又能完美适配MatFormField的样式和交互逻辑。

实现步骤 #

1. 组件定义与依赖注入 #

在组件类上配置装饰器，注入NgControl和MatFormField，并提供MAT_FORM_FIELD_CONTROL令牌让MatFormField识别该组件为内部控件：

import { Component, Input, Optional, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { MatFormFieldControl } from '@angular/material/form-field';
import { Subject } from 'rxjs';

@Component({
  selector: 'form-field-custom-control-example',
  templateUrl: './form-field-custom-control-example.component.html',
  styleUrls: ['./form-field-custom-control-example.component.scss'],
  providers: [{ provide: MatFormFieldControl, useExisting: FormFieldCustomControlExampleComponent }],
  host: {
    '[class.example-floating]': 'shouldLabelFloat',
    '[id]': 'id',
    '[attr.aria-describedby]': 'describedBy',
  },
})
export class FormFieldCustomControlExampleComponent implements ControlValueAccessor, MatFormFieldControl<string> {
  stateChanges = new Subject<void>();
  value: string = '';
  @Input() id: string = '';
  @Input() placeholder: string = '';
  disabled = false;
  focused = false;
  describedBy = '';

  constructor(
    @Optional() @Self() public ngControl: NgControl,
    @Optional() public parentFormField: MatFormField
  ) {
    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }
  }

  // ControlValueAccessor 实现
  writeValue(value: string): void {
    this.value = value || '';
    this.stateChanges.next();
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
    this.stateChanges.next();
  }

  onChange = (value: string) => {};
  onTouched = () => {};

  // MatFormFieldControl 实现
  get shouldLabelFloat(): boolean {
    return this.focused || !this.empty;
  }

  get empty(): boolean {
    return !this.value;
  }

  setDescribedByIds(ids: string[]): void {
    this.describedBy = ids.join(' ');
  }

  onFocus(): void {
    if (!this.focused) {
      this.focused = true;
      this.stateChanges.next();
    }
  }

  onBlur(): void {
    if (this.focused) {
      this.focused = false;
      this.onTouched();
      this.stateChanges.next();
    }
  }

  onInputChange(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.value = input.value;
    this.onChange(this.value);
    this.stateChanges.next();
  }
}

2. 组件模板 #

模板内部直接包含mat-form-field和你的自定义输入控件（这里以基础input为例，可替换为你之前实现的自定义控件）：

<mat-form-field>
  <input
    matInput
    [placeholder]="placeholder"
    [value]="value"
    [disabled]="disabled"
    (input)="onInputChange($event)"
    (focus)="onFocus()"
    (blur)="onBlur()"
  >
</mat-form-field>

3. 调用方式 #

现在可以按照需求直接使用：

<form [formGroup]="form">
  <form-field-custom-control-example 
    formControlName="someControl"
    placeholder="自定义输入框"
    id="custom-input"
  ></form-field-custom-control-example>
</form>

关键注意点 #

• 必须提供MAT_FORM_FIELD_CONTROL令牌，否则MatFormField无法识别该组件为内部控件。
• 通过NgControl关联表单控件，确保formControlName能正确绑定。
• 实现stateChanges主题，用于通知MatFormField更新样式和状态（如标签浮动、错误提示）。
• 确保ControlValueAccessor的三个核心方法正确实现，保证表单值双向同步。

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