如何为Formly自定义日历组件添加校验规则与错误提示

1. 核心错误原因 #

自定义日历组件中p-calendar绑定的表单控件对象错误，且没有添加错误提示的渲染逻辑，导致校验规则无法关联到组件，也不会展示错误信息。 #

2. 分步修改代码 #

修改 calendario.html #

首先修正表单控件绑定，同时添加错误样式判断和错误提示渲染逻辑：

<div class="p-field p-col-12 p-md-4" [ngClass]="{'ng-invalid ng-dirty ng-touched': field.invalid && (field.dirty || field.touched)}">
    <label [for]="field.id">{{ to.label }}</label>
    <p-calendar  
      [formControl]="formControl"  
      firstDayOfWeek="1" 
      dateFormat="dd/mm/yy" 
      [inputId]="field.id"
      [placeholder]="to.placeholder"
      [formlyAttributes]="field"
    ></p-calendar>
    <!-- 错误提示渲染 -->
    <small *ngIf="field.invalid && (field.dirty || field.touched)" class="p-error">
      <formly-validation-message [field]="field"></formly-validation-message>
    </small>
</div>

calendario.ts 无需额外修改，现有代码已经正确继承了FieldType基类。 #

（可选）全局统一必填提示配置 #

如果需要全局统一默认的校验提示，可以修改app.module.ts中的FormlyModule配置：

FormlyModule.forRoot({ 
  extras: { lazyRender: true }, 
  types: [
    { name: 'calendario', component: CalendarioComponent },
  ],
  // 全局校验消息配置
  validationMessages: [
    { name: 'required', message: '该字段为必填项' },
  ]
}),
CalendarModule,

3. 校验逻辑说明 #

你在app.component.ts中给字段配置的required: true和自定义validation.messages规则是正确的，完成上述修改后：

• 日期为空且字段被触碰/修改时，会自动触发必填校验，展示你配置的La fecha es necesaria错误提示
• 外层容器会自动添加PrimeNG的错误样式，触发对应UI变化

内容的提问来源于stack exchange，提问作者Juna