首页 > 营销学院 > 技术知识

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: `
  <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 状态不更新，验证消息便无法显示。

Jaaz

开源的AI设计智能体

216 查看详情 Jaaz

解决方案：显式触发 _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 表单至关重要。

以上就是Angular Formly 自定义组件验证消息未在失焦时显示问题的解决方案的详细内容，更多请关注其它相关文章！

# bootstrap # 德阳seo # 电子商务网站建设论文 # 邳州品质网站推广多少钱 # 服务端 # 使其 # 才会 # 绑定 # 这一 # 选择器 # 输入框 # 回调 # 自定义 # 表单 # yy # 回调函数 # access # html # 外贸海外推广广告营销方案策划 # 茂名网站建设源码 # 最新网络推广营销方案 # myeong-seo # 江西省问答营销推广 # 营销推广要遵守法律法规 # 王晓东seo

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-28

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。