如何使用日历正式创建自定义验证

如何解决如何使用日历正式创建自定义验证

我实现了一个日历，创建了一个自定义模板，但我不知道如何创建验证器和消息。 我看到很多带有输入的示例，但没有输入 elemente。

app.modules.ts

FormlyModule.forRoot({ extras: { lazyRender: true },types: [
        { name: 'calendario',component: CalendarioComponent },],}),CalendarModule,

日历.html

<p>calendario works!</p>
<div class="p-field p-col-12 p-md-4" >
    <label for="spanish">Spanish</label>
   
 
    <p-calendar  
    [formControl]="dateFormControl"  
    firstDayOfWeek ="1" 
    dateFormat="dd/mm/yy" 
    inputId="spanish"
    [formlyAttributes]="field"
    ></p-calendar>
  
  </div>

calendario.ts

import { Component,OnInit } from '@angular/core';
import { FormControl,Validators } from '@angular/forms';
import { FieldType } from '@ngx-formly/core';

import { PrimeNGConfig } from 'primeng/api';

@Component({
  selector: 'app-calendario',templateUrl: './calendario.component.html',styleUrls: ['./calendario.component.scss']
})
export class CalendarioComponent extends FieldType{}

app.component.ts

fields: FormlyFieldConfig[] = [
    {
      fieldGroupClassName: 'p-grid',fieldGroup: [
        {
          className: 'p-lg-3 p-md-6 p-col-12',key: 'calendar',type: 'calendario',templateOptions: {
            label: 'Email address',placeholder: 'Enter email',required: true,}
        },{
          className: 'p-lg-3 p-md-6 p-col-12',key: 'Calendario',templateOptions: {
            label: 'fecha',placeholder: 'fecha',},validation:{
            messages:{
              required: 'La fecha es necesaria'
            },}
          
        },{
          className:' p-fluid',key:'texto',type:'input',templateOptions:{
            label: 'Nombre',placeholder: 'Introduce un nombre',required: true
          },validation:{
            messages:{
              required:'La fecha es necesaria'
            },}

        },key:'email',]
    }
    
  ];

日期不显示错误且为空且不改变颜色，我不知道我必须这样做。 对不起，我的英语不好。

解决方法

大家好，我是这个问题的新手，但我终于得到了错误显示，我有改变 app.components.html

<div class="p-field p-col-12 p-md-4" >
    <label for="spanish">Spanish</label>
   
 
    <p-calendar  
    [formControl]="formControl"  
    firstDayOfWeek ="1" 
    dateFormat="dd/mm/yy" 
    inputId="spanish"
    [ngClass]="{'ng-pristine ng-invalid ng-star-inserted ng-dirty ng-touched': (formControl.touched && formControl.getError('required')) }"
    [formlyAttributes]="field"
    ></p-calendar>
 
  <div *ngIf="formControl.touched && formControl.getError('required')" >
    {{field.validation.messages.required }}
  </div>
   
  </div>

如果有人需要，我希望对他们有所帮助。 对不起我的英语。