Calendar PrimeNG does not work

0
votes

I have installed PrimeNG and want to use Calendar component of it. Thus, I have made a MyCalendar Component:

TS file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-calendar',
  templateUrl: './my-calendar.component.html',
  styleUrls: ['./my-calendar.component.css']
})
export class CalendarDemoComponent  {    
    myDate1: Date;       
}

HTML file:

<div class="ui-g ui-fluid">
  <div class="ui-g-12 ui-md-4">
      <h3> A simple canedar </h3>
      <p-calendar [(ngModel)]="myDate1"></p-calendar> {{myDate1|date}} // line 4
  </div>
</div>

By running the app I get this error on the console:

CalendarDemoComponent.html:4 ERROR Error: No value accessor for form control with unspecified name attribute

Could you please help me finding out what is wrong in my code?

2
angularprimeng

2 Answers

0
votes

You should have the name attribute for your calendar,

<p-calendar [(ngModel)]="myDate1" name="date" dateFormat='dd/mm/yy'"></p-calendar>
0
votes

The problem was the CalendarModule was missing tn the App Module. (I had imported it in MyCalendar module).

import {CalendarModule} from 'primeng/calendar';    

    imports: [
    BrowserModule,
    BrowserAnimationsModule,    
    CalendarModule
  ]