0

I implemented a calendar, create a custom template but i i dont have idea how to create, validators nad message. I see a lot of examples with input but not elemente wasn't input.

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',
          }

        },
      ]
    }
    
  ];

The date not show error with empty and not change color, i don't have clue that i have to do. Sorry for my poor english.

1 Answer 1

0

Hello everybody i am rookie in this issue, but i finally i get make the error show, i have change 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>

if somebody need, i hope helpful them. Sorry for my english.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.