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

【问题标题】：How to create a custom validadtion in formly with calendar如何使用日历正式创建自定义验证
【发布时间】：2021-05-26 20:22:26
【问题描述】：

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

app.modules.ts

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

calendario.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',
          type: 'calendario',
          templateOptions: {
            label: 'fecha',
            placeholder: 'fecha',
            required: true,
          },
          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'
            },
          }

        },
        {
          className:' p-fluid',
          key:'email',
          type:'input',
          templateOptions:{
            label: 'Nombre',
            placeholder: 'Introduce un nombre',
          }

        },
      ]
    }
    
  ];

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

【问题讨论】：

标签： angular angular-formly ngx-formly

【解决方案1】：

大家好，我是这个问题的菜鸟，但我终于得到了错误显示，我有改变 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>

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

【讨论】：