在 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: ` <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [formControl]="myControl" ngbDatepicker #d="ngbDatepicker" (keyup)="change($event)" (dateSelect)="change($event)" (blur)="_onTouch($event)" /> `, 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 表单至关重要。
以上就是Angular Formly 自定义组件验证消息未在失焦时显示问题的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533149.html
微信扫一扫 
支付宝扫一扫 
