简化实现ControlValueAccessor与MatFormFieldControl的Angular Material自定义控件

当然可以把ControlValueAccessor和MatFormFieldControl的接口逻辑直接委托给子级的MatInput——毕竟它已经完整实现了这些表单控件的基础能力，我们只需要在自定义组件里做“转发”，不用从零实现所有方法。以下是具体的简化思路和代码示例：

1. 核心思路：委托而非重写 #

自定义组件的核心是复用MatInput的表单接口实现，只专注于添加服务端数据对接的逻辑。通过@ViewChild获取子级MatInput实例，把所有接口方法和属性的逻辑直接转发给它。

2. 具体实现步骤 #

（1）委托ControlValueAccessor接口 #

在自定义组件中注入MatInput实例，然后实现ControlValueAccessor的四个方法，每个方法直接调用MatInput的对应方法：

@ViewChild(MatInput) private matInput!: MatInput;

// ControlValueAccessor 方法转发
writeValue(value: any): void {
  this.matInput.writeValue(value);
}

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

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

setDisabledState(isDisabled: boolean): void {
  this.matInput.setDisabledState(isDisabled);
}

（2）委托MatFormFieldControl接口 #

MatFormFieldControl需要实现多个属性和方法，大部分都可以通过getter/setter直接转发给MatInput，同时处理状态变化的通知：

// MatFormFieldControl 属性转发
get value(): any { return this.matInput.value; }
set value(v: any) { this.matInput.value = v; }
get disabled(): boolean { return this.matInput.disabled; }
set disabled(v: boolean) { this.matInput.disabled = v; }
get id(): string { return this.matInput.id; }
get placeholder(): string { return this.matInput.placeholder; }
get focused(): boolean { return this.matInput.focused; }
get empty(): boolean { return this.matInput.empty; }
get shouldLabelFloat(): boolean { return this.matInput.shouldLabelFloat; }

// 状态变化流直接合并MatInput的stateChanges
get stateChanges(): Observable<void> {
  return merge(this.matInput.stateChanges);
}

// MatFormFieldControl 方法转发
onContainerClick(event: MouseEvent): void {
  this.matInput.onContainerClick(event);
}

setDescribedByIds(ids: string[]): void {
  this.matInput.setDescribedByIds(ids);
}

（3）专注核心定制逻辑 #

把服务端数据对接的逻辑放在自定义组件里，比如监听输入值变化请求接口、渲染自动完成选项：

options$: Observable<YourOptionType[]>;

ngOnInit(): void {
  // 监听输入框变化，请求服务端数据
  this.options$ = this.matInput.valueChanges.pipe(
    debounceTime(300),
    switchMap(inputValue => this.yourApiService.searchOptions(inputValue))
  );
}

3. 完整组件示例 #

import { Component, ViewChild, forwardRef, OnInit } from '@angular/core';
import {
  ControlValueAccessor,
  NG_VALUE_ACCESSOR,
  MatFormFieldControl,
  MatInput
} from '@angular/material';
import { merge, Observable } from 'rxjs';
import { debounceTime, switchMap } from 'rxjs/operators';
import { YourApiService, YourOptionType } from '../services/your-api.service';

@Component({
  selector: 'app-server-autocomplete',
  template: `
    <input 
      matInput 
      [matAutocomplete]="auto"
      [placeholder]="placeholder"
      [disabled]="disabled"
      [required]="required"
    >
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options$ | async" [value]="option.value">
        {{option.label}}
      </mat-option>
    </mat-autocomplete>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ServerAutocompleteComponent),
      multi: true
    },
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => ServerAutocompleteComponent)
    }
  ]
})
export class ServerAutocompleteComponent implements ControlValueAccessor, MatFormFieldControl<YourOptionType['value']>, OnInit {
  @ViewChild(MatInput) private matInput!: MatInput;
  options$: Observable<YourOptionType[]>;

  // 自定义可传入属性
  placeholder: string = '';
  required: boolean = false;

  // MatFormFieldControl 必要属性转发
  get value(): YourOptionType['value'] { return this.matInput.value; }
  set value(v: YourOptionType['value']) { this.matInput.value = v; }
  get disabled(): boolean { return this.matInput.disabled; }
  set disabled(v: boolean) { this.matInput.disabled = v; }
  get id(): string { return this.matInput.id; }
  get focused(): boolean { return this.matInput.focused; }
  get empty(): boolean { return this.matInput.empty; }
  get shouldLabelFloat(): boolean { return this.matInput.shouldLabelFloat; }
  get stateChanges(): Observable<void> { return merge(this.matInput.stateChanges); }
  errorState: boolean = false;

  constructor(private yourApiService: YourApiService) {}

  // ControlValueAccessor 方法转发
  writeValue(value: YourOptionType['value']): void {
    this.matInput.writeValue(value);
  }

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

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

  setDisabledState(isDisabled: boolean): void {
    this.matInput.setDisabledState(isDisabled);
  }

  // MatFormFieldControl 方法转发
  onContainerClick(event: MouseEvent): void {
    this.matInput.onContainerClick(event);
  }

  setDescribedByIds(ids: string[]): void {
    this.matInput.setDescribedByIds(ids);
  }

  ngOnInit(): void {
    this.options$ = this.matInput.valueChanges.pipe(
      debounceTime(300),
      switchMap(inputValue => this.yourApiService.searchOptions(inputValue))
    );
  }
}

4. 优势 #

• 无需重复实现表单控件的基础逻辑，只关注服务端对接的核心功能
• 完美兼容Angular Form表单体系（模板驱动/响应式表单都能直接用）
• 保持与原生MatInput一致的表单行为，降低维护成本

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