如何自定义角度材料表单域组件？

<mat-form-field>
  <input matInput [placeholder]="placeholder" [(ngModel)]="value">
</mat-form-field>

import { Component, Directive, Input, HostBinding, Optional, Self } from '@angular/core';
import { ControlValueAccessor, NgControl, MatFormFieldControl } from '@angular/material';

@Directive({
  selector: 'custom-input',
  providers: [{ provide: MatFormFieldControl, useExisting: CustomInputComponent }]
})
export class CustomInputComponent implements ControlValueAccessor, MatFormFieldControl<any> {
  static nextId = 0;

  @Input() label: string;
  @Input() placeholder: string;

  value: any;
  onChange: any;
  onTouched: any;
  disabled = false;

  @HostBinding() id = `custom-input-${CustomInputComponent.nextId++}`;

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

  writeValue(value: any): void {
    this.value = value;
  }

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

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

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

<form>
  <custom-input label="Custom Input" placeholder="Enter value"></custom-input>
</form>