# Angular Material 自定义 MatFormFieldControl 的错误状态管理
在使用 Angular Material 中的表单控件时，我们通常会依赖于 `MatFormField` 和 `MatInput` 等组件来构建表单。但是，有时候我们可能需要创建自定义的表单控件，以满足特定的需求。在这种情况下，我们需要确保我们的自定义控件能够正确地处理错误状态。本文将介绍如何在自定义 `MatFormFieldControl` 中有效地管理错误状态，并提供一个简单的案例代码来演示这一过程。## 自定义 MatFormFieldControl 的基础首先，让我们回顾一下如何创建一个简单的自定义 `MatFormFieldControl`。我们需要实现 `MatFormFieldControl` 接口，并使用 `@Directive` 装饰器将其应用到我们的自定义控件上。typescriptimport { Component, Directive, Input, OnDestroy } from '@angular/core';import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';import { Subject } from 'rxjs';import { MatFormFieldControl } from '@angular/material/form-field';@Component({ selector: 'app-custom-input', template: ` `, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: CustomInputComponent, multi: true, }, ],})export class CustomInputComponent implements MatFormFieldControl, ControlValueAccessor, OnDestroy{ // Implementation of MatFormFieldControl and ControlValueAccessor interfaces // ... ngOnDestroy() { this.stateChanges.complete(); }} ## 管理错误状态当我们的自定义控件涉及到表单验证时，我们需要确保在出现错误时正确地管理错误状态。为了实现这一点，我们需要在控件的实现中添加一些逻辑。### 添加错误状态逻辑typescriptexport class CustomInputComponent implements MatFormFieldControl在上面的代码中，`errorState` 属性返回一个布尔值，表示控件当前是否处于错误状态。我们在这里添加了一个简单的示例条件，你需要根据你的实际需求修改它。### 更新错误状态, ControlValueAccessor, OnDestroy{ // ... get errorState(): boolean { // Add your error validation logic here const isInvalid = /* Your error validation condition */; return isInvalid && this.touched; } // ...}
typescriptexport class CustomInputComponent implements MatFormFieldControl在上述代码中，我们添加了一个私有属性 `_touched` 用于跟踪控件是否被触摸过。当控件失去焦点时，我们调用 `onBlur` 方法来更新触摸状态，并通过 `stateChanges.next()` 来通知 Angular 变更检测。## 通过以上步骤，我们成功地实现了在自定义 `MatFormFieldControl` 中管理错误状态的基本逻辑。这确保了我们的自定义控件能够与 Angular 表单验证协同工作，并正确地反映错误状态。在实际应用中，你需要根据你的具体需求扩展这些基本逻辑，并确保你的自定义控件能够处理各种可能的错误情况。希望这篇文章对你理解 Angular Material 中自定义表单控件的错误状态管理有所帮助。, ControlValueAccessor, OnDestroy{ // ... private _touched = false; get touched(): boolean { return this._touched; } set touched(value: boolean) { if (value !== this._touched) { this._touched = value; this.stateChanges.next(); } } // ... onBlur() { this.touched = true; }}