Angular Formly 自定义组件验证消息未在失焦时显示问题的解决方案_技术教程

在 angular 应用中，当我们需要将自定义组件集成到响应式表单或 formly 表单中时，通常会实现 `controlvalueaccessor` 接口。这个接口允许自定义组件充当表单控件，与 angular 的表单系统进行双向数据绑定和状态同步。然而，一个常见的挑战是，在自定义组件中，表单验证消息可能无法在用户离开输入框（即失焦事件）时按预期显示。这通常是由于 `_ontouch` 回调未在适当的时机被触发，导致表单控件的 `touched` 状态未能更新。

理解 ControlValueAccessor 与表单验证

ControlValueAccessor 接口包含四个核心方法：

writeValue(obj: any): 从表单模型接收值，并将其写入自定义组件。
registerOnChange(fn: any): 注册一个回调函数，当组件内部值发生变化时，调用此函数以通知表单模型。
registerOnTouched(fn: any): 注册一个回调函数，当组件被“触碰”（例如，用户与输入框交互后离开）时，调用此函数以通知表单模型。
setDisabledState?(isDisabled: boolean): 可选方法，用于处理表单控件的禁用状态。

表单验证消息的显示通常依赖于控件的三个状态：dirty（值已更改）、touched（用户已与控件交互）和 invalid（值不符合验证规则）。只有当控件处于 touched 且 invalid 状态时，验证消息才会被触发显示。

在提供的自定义日期选择器组件 NgbdDatepickerPopup 中，_onTouch 回调在 change 方法中被调用，这意味着只有当日期值发生实际改变时，控件才会被标记为 touched。如果用户点击输入框，然后不修改任何内容就点击离开，change 方法不会被触发，_onTouch 也不会被调用，导致控件保持 untouched 状态，即使它已经失去了焦点。

问题示例：自定义日期选择器与 Formly 集成

以下是一个自定义 Angular 日期选择器组件 NgbdDatepickerPopup 的简化示例，它实现了 ControlValueAccessor。这个组件被 Formly 封装后，出现了失焦不显示验证消息的问题。

原始自定义日期选择器组件 (custom-date-picker.component.ts)

import { Component, forwardRef, Input } from '@angular/core';
import {
  ControlValueAccessor,
  FormControl,
  NG_VALUE_ACCESSOR,
} from '@angular/forms';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap'; // 假设已导入NgbDatepicker

@Component({
  selector: 'custom-date-picker',
  template: `
  
  
  

  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NgbdDatepickerPopup),
      multi: true,
    },
  ],
})
export class NgbdDatepickerPopup implements ControlValueAccessor {
  myControl = new FormControl();
  model = '';
  private _onChange = (value: unknown) => {};
  private _onTouch = (value: unknown) => {}; // 这里的 _onTouch 是私有的，且只在 change 中被调用

  writeValue(obj: any): void {
    this.myControl.setValue(obj);
  }
  registerOnChange(fn: any): void {
    this._onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this._onTouch = fn;
  }

  change(event: unknown) {
    if (event instanceof Event) {
      const date = (event.target as HTMLInputElement).value;
      this._onChange(date);
      this._onTouch(date); // 仅在此处调用 _onTouch
    }
  }
}

Formly 封装组件 (formly-field-input.component.ts)

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-field-input',
 template: `
   
   
            
    
 `,
})
export class FormlyFieldInput extends FieldType {}

在上述 Formly 封装中，formly-validation-message 的显示依赖于 showError，而 showError 通常在控件 touched 且 invalid 时为 true。由于 _onTouch 未在失焦时触发，导致 touched 状态不更新，验证消息便无法显示。

解决方案：显式触发 _onTouch 回调

要解决这个问题，我们需要确保 _onTouch 回调在用户与输入框交互后（尤其是失焦时）被正确调用。最直接的方法是：

将 _onTouch 属性从 private 修改为 public，使其可以在组件模板中访问。
在自定义组件的模板中，为输入框添加 (blur) 事件绑定，使其在失焦时调用 _onTouch。

修正后的自定义日期选择器组件 (custom-date-picker.component.ts)

import { Component, forwardRef, Input } from '@angular/core';
import {
  ControlValueAccessor,
  FormControl,
  NG_VALUE_ACCESSOR,
} from '@angular/forms';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'custom-date-picker',
  template: `
  
  
  />
  

  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NgbdDatepickerPopup),
      multi: true,
    },
  ],
})
export class NgbdDatepickerPopup implements ControlValueAccessor {
  myControl = new FormControl();
  model = '';
  private _onChange = (value: unknown) => {};
  public _onTouch = (value: unknown) => {}; // 修正：改为 public

  writeValue(obj: any): void {
    this.myControl.setValue(obj);
  }
  registerOnChange(fn: any): void {
    this._onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this._onTouch = fn;
  }

  change(event: unknown) {
    if (event instanceof Event) {
      const date = (event.target as HTMLInputElement).value;
      this._onChange(date);
      this._onTouch(date);
    }
  }
}

通过上述修改，当用户点击日期输入框后，无论是否修改了日期值，只要输入框失去焦点，(blur)="_onTouch($event)" 就会触发组件内部的 _onTouch 方法，进而调用 Angular 表单系统注册的 onTouched 回调。这会正确地将表单控件标记为 touched，从而使得 Formly 的验证消息能够根据 touched 和 invalid 状态按预期显示。

注意事项与最佳实践

_onTouch 的参数：_onTouch 回调通常不期望接收参数，它的主要作用是通知表单控件其已被触碰。尽管在示例中我们传递了 $event，但 Angular 注册的 onTouched 函数通常会忽略此参数。如果组件内部需要更复杂的逻辑来决定何时标记 touched，可以创建一个公共方法来封装 this._onTouch() 的调用。
统一 touched 触发机制：确保所有用户交互（如 change, blur, click 等）都能在适当的时机触发 _onTouch，以保证表单状态的准确性。
Formly 的 showError：Formly 的 showError 属性会自动根据 FormControl 的 touched、dirty 和 invalid 状态来判断是否显示错误信息。正确触发 _onTouch 是确保 showError 正确工作的基础。
组件复用性：在设计 ControlValueAccessor 组件时，应考虑其复用性，并确保 onChange 和 onTouched 回调在各种交互场景下都能被正确触发。

总结

在 Angular Formly 中使用自定义 ControlValueAccessor 组件时，确保表单验证消息在失焦时正确显示是提升用户体验的关键。核心在于正确管理表单控件的 touched 状态。通过将 _onTouch 回调设置为 public 并将其绑定到自定义组件输入元素的 (blur) 事件，我们可以有效地解决这一问题，使 Formly 的验证机制能够按预期工作，为用户提供清晰的实时反馈。这一实践对于构建健壮且用户友好的 Angular 表单至关重要。