在 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: `
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[formControl]="myControl"
ngbDatepicker
#d="ngbDatepicker"
(keyup)="change($event)"
(dateSelect)="change($event)"
/>
<button
class="btn btn-outline-secondary bi bi-calendar3"
(click)="d.toggle()"
type="button"
></button>
</div>
`,
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: `
<custom-date-picker [formControl]="formControl" [formlyAttributes]="field"></custom-date-picker>
<div class="invalid-feedback" style="display: block;">
<formly-validation-message *ngIf="showError" [field]="field"></formly-validation-message>
</div>
`,
})
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: `
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[formControl]="myControl"
ngbDatepicker
#d="ngbDatepicker"
(keyup)="change($event)"
(dateSelect)="change($event)"
(blur)="_onTouch($event)" <!-- 新增：在失焦时调用 _onTouch -->
/>
<button
class="btn btn-outline-secondary bi bi-calendar3"
(click)="d.toggle()"
type="button"
></button>
</div>
`,
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 表单至关重要。
