Mat-Form-Field 必须包含 MatFormFieldControl

在Angular Material中， Mat-Form-Field 是一个用于包装和美化表单控件的组件。当使用 Mat-Form-Field 时，必须包含 MatFormFieldControl 组件。

MatFormFieldControl 是一个抽象的类，用于定义表单控件应该具有的基本功能。它提供了控件状态、一些元数据（例如占位符和错误消息）以及控件值和每次更改时的响应能力。

什么是 Mat-Form-Field

在表单中，我们通常使用各种输入控件（例如文本框）来允许用户交互。 Angular Material 提供了许多用于美化这些控件的组件。 Mat-Form-Field 是其中之一。

Mat-Form-Field 可以包含一个或多个输入控件，例如文本框、下拉列表、单选按钮等。这些控件可以组织在一起并放在一个方便的地方，使表单看起来更加整洁和易于使用。

此外，Mat-Form-Field 还提供了很多选项和元数据，以控制表单控件的行为。例如，我们可以使用 Mat-Form-Field 来显示占位符文本、调整控件的大小和位置、添加错误消息等等。

为什么必须包含 MatFormFieldControl

Mat-Form-Field 只是一个容器，它本身并不知道它包含的控件和如何与它们交互。这就是 MatFormFieldControl 的作用。

MatFormFieldControl 提供了一个接口，它定义了每个表单控件应该具有的属性和方法。Mat-Form-Field 依赖于它来正确地渲染和呈现表单控件，并将其值与表单绑定。

因此，任何使用 Mat-Form-Field 的表单控件都必须实现 MatFormFieldControl 接口，以便与 Mat-Form-Field 进行交互。

如何实现 MatFormFieldControl

要实现 MatFormFieldControl，我们需要遵循以下步骤：

1. 创建一个实现 MatFormFieldControl 接口的类。
2. 将表单控件的属性和方法添加到该类中。
3. 使用 ViewChild 装饰器将实例绑定到 HTML 模板中的 Mat-Form-Field 控件。
4. 在组件中添加控件状态和值的处理逻辑。

以下是一个简单的示例，它演示了如何实现 MatFormFieldControl 接口：

import { Component, ViewChild } from "@angular/core";
import { MatFormFieldControl } from "@angular/material/form-field";
import { FormControl, NgControl } from "@angular/forms";

@Component({
  selector: "app-custom-input",
  templateUrl: "./custom-input.component.html",
  providers: [{ provide: MatFormFieldControl, useExisting: CustomInputComponent }]
})
export class CustomInputComponent implements MatFormFieldControl<string> {
  static nextId = 0;

  @ViewChild(NgControl) control: NgControl;

  focused = false;
  errorState = false;
  id = `custom-input-${CustomInputComponent.nextId++}`;
  placeholder = "";
  required = false;

  constructor() {}
  
  get value(): string {
    return this.control.value;
  }

  set value(value: string) {
    this.control.control.setValue(value);
    this.control.control.markAsDirty();
    this.control.control.markAsTouched();
    this.control.control.updateValueAndValidity();
  }

  get empty(): boolean {
    const value = this.control.value;
    return value === null || value === undefined || value === "";
  }

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

  onContainerClick(event: MouseEvent): void {}

  ngOnDestroy(): void {
    // Clean up resources
  }
}

在这个示例中，我们创建了一个名为 CustomInputComponent 的组件。该组件实现了 MatFormFieldControl 接口，并提供了一些与输入表单控件相关的属性和方法。

我们使用 ViewChild 装饰器将 NgControl 实例绑定到这个组件中。这样我们就可以使用这个实例来获取和设置控件的值和状态。

最后，我们使用 providers 数组将 CustomInputComponent 注册为 Mat-Form-Field 的控件，并使用 useExisting 来指定我们要注册的控件。

总结

在Angular Material中， Mat-Form-Field 是一个用于包装和美化表单控件的组件。 MatFormFieldControl 是一个抽象的类，用于定义表单控件应该具有的基本功能。

任何使用 Mat-Form-Field 的表单控件都必须实现 MatFormFieldControl 接口，以便与 Mat-Form-Field 进行交互。

要实现 MatFormFieldControl，我们需要在组件中添加表单控件的属性和方法，并使用 ViewChild 将 NgControl 实例绑定到组件中。

在编写Angular Material表单时，务必按照这些指导原则来正确使用 Mat-Form-Field 和 MatFormFieldControl。