Unexpected literal at position 2

Question

I got this error while displaying on html page and I am returning date as an array.If I want want to display only month and year in future then what should be done?Right now I want to return whole date so there is error on html page in p-calendar tag in ngmodel where I am displaying date2[i] where i is index which comes from p-datalist I got error at html page

educationform.component.html:298 ERROR Error: Unexpected literal at position 2 at viewWrappedDebugError (errors.js:42) at callWithDebugContext (services.js:871) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (services.js:385) at ViewRef_.detectChanges (refs.js:508) at eval (application_ref.js:742) at Array.forEach () at ApplicationRef.tick (application_ref.js:742) at eval (application_ref.js:575) at ZoneDelegate.invoke (zone.js?1534930465821:388) at Object.onInvoke (ng_zone.js:594) View_EducationFormComponent_1 @ educationform.component.html:298 educationform.component.html:298 ERROR CONTEXT DebugContext_

<p-calendar [(ngModel)]="date2[i]" formControlName="startdate" [monthNavigator]="true" [yearNavigator]="true" yearRange="1950:2040"
                                    [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar>

Person.js

{
"EducationDegrees":[{

                "EducationId":1001,
                "InstituteName":"SPIT",
                "EducationType":"Professional",
                "Degree":"Mca",
                "University":"Mumbai",
                "MarksObtain":90,
                "OutOf":100,
                "Percentage":90,
                "PassingYear":"2016",
                "Stream":"Computer Science",
                "Grade":"A",
                "CourseDuration":3,
                "StartDate":"2005-05-05",
                "ExpectedEndDate":"4/2018",
                "ActualEndDate":"4/2018"

        }],
}

education.component.html

<form [formGroup]="education" (ngSubmit)="onSubmit(education.value)">
    <p-dataList [value]="eduqualifications" [paginator]="true" [rows]="1">
        <p-header>
            Education qualifications
        </p-header>
        <ng-template let-eduqualification let-i="index" pTemplate="item">
            <div class="ui-fluid">

                <div class="ui-inputgroup">

                    <label for="email" class="ui-md-2 control-label">Start Date</label>
                    <div class="ui-md-6">
                        <div class="ui-inputgroup">
                            <p-calendar [(ngModel)]="date2[i]" formControlName="startdate" [monthNavigator]="true" [yearNavigator]="true" yearRange="1950:2040"
                                [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar>
                            <span style="margin-left:45px">{{date2|date}}</span>
                        </div>
                    </div>
                    <div class="ui-md-4">
                        <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!education.controls['startdate'].valid&&education.controls['startdate'].dirty">
                            <i class="fa fa-close"></i>
                            Start date is required
                        </div>
                    </div>

                </div>

                <div class="ui-inputgroup">
                    <div class="ui-md-8 ui-md-offset-4">
                        <button pButton type="submit" label="Submit" [disabled]="!education.valid"></button>
                        <button pButton type="button" (click)="count()" label="Cancel"></button>
                    </div>
                </div>


            </div>
        </ng-template>
    </p-dataList>
</form>

education.component.ts

import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';
import { Message } from 'primeng/components/common/api';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { PersonListService,Person, EducationDegree} from './person-list.service';
/**
 * This class represents the lazy loaded PersonComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-educationform',
  templateUrl: 'educationform.component.html',
  styleUrls: ['educationform.component.css']
})
export class EducationFormComponent implements OnInit {

  date2:Array<Date>=[];
  EduTypes: SelectItem[];
  EduType: string = '';
  Universitys: SelectItem[];
  University: string = '';
  Streams: SelectItem[];
  Stream: string = '';
  Grades: SelectItem[];
  Grade: string = '';
  CourseDurations: SelectItem[];
  CourseDuration: string = '';
  Degrees: SelectItem[];
  Degree: string = '';
  SubStreams: SelectItem[];
  SubStream: string = '';
  msgs: Message[] = [];
  education: FormGroup;
  submitted: boolean;
  errorMessage: any;
  eduqualifications: EducationDegree[];

  constructor(private fb: FormBuilder,public personListService:PersonListService) { }

  ngOnInit() {
    this.getperson();
    this.education = this.fb.group({
        'institutename': new FormControl('', Validators.required),
        'educationtype': new FormControl('', Validators.required),
        'university': new FormControl('', Validators.required),
        'degree': new FormControl('', Validators.required),
        'marksobtain': new FormControl('', Validators.required),
        'outof': new FormControl('', Validators.required),
        'percentage': new FormControl('', Validators.required),
        'passingyear': new FormControl('', Validators.required),
        'stream': new FormControl('', Validators.required),
        'grade': new FormControl('', Validators.required),
        'courseduration': new FormControl('', Validators.required),
        'startdate': new FormControl('', Validators.required) 
    }
);

    this.EduTypes = [
        {label: 'Basic', value: 'Basic'},
        {label: 'technical', value: 'technical'},
        {label: 'Professional', value: 'Professional'}

    ];

    this.Universitys = [
        {label: 'Mumbai', value: 'Mumbai'},
        {label: 'Pune', value: 'Pune'},
        {label: 'Kolhapur', value: 'Kolhapur'}    
    ];

    this.Degrees = [
        {label: 'BE', value: 'BE'},
        {label: 'Bsc', value: 'Bsc'},
        {label: 'Bcom', value: 'Bcom'}    
    ];


    this.Streams = [
        {label: 'Science', value: 'Science'},
        {label: 'Commerce', value: 'Commerce'},
        {label: 'Arts', value: 'Arts'}
    ];

    this.SubStreams = [
        {label: 'Computer Science', value: 'Computer Science'},
        {label: 'Finance', value: 'Finance'},
        {label: 'Mass Media', value: 'Mass Media'}
    ];

    this.Grades = [
        {label: 'A', value: 'A'},
        {label: 'B', value: 'B'},
        {label: 'C', value: 'C'},
        {label: 'D', value: 'D'},
        {label: 'E', value: 'E'},
        {label: 'F', value: 'F'}
    ];

    this.CourseDurations = [
        {label: '1', value: '1'},
        {label: '2', value: '2'},
        {label: '3', value: '3'},
        {label: '4', value: '4'},
        {label: '5', value: '5'},
        {label: '6', value: '6'},
        {label: '7', value: '7'},
        {label: '8', value: '8'},
        {label: '9', value: '9'},
        {label: '10', value: '10'}       
    ];  
  }
  getperson(){

    this.personListService.getEducation()
     .subscribe(
      resp =>{
       this.eduqualifications = resp.EducationDegrees
       var i;
       for(i=0;i<this.eduqualifications.length;i++)
       {
       this.date2[i]=this.eduqualifications[i].StartDate
       }
       console.log(this.date2)
       console.log(this.eduqualifications.length)
       //resp => this.addresses = resp.Addresses,
       error => this.errorMessage = <any>error
      }
     );
   }
  onSubmit(value: string) {
    this.submitted = true;
    this.msgs = [];
    this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
 }
}

Answer 1

date2[i] is not a Date object. You need it to cast it to Date Object before that ( new Date(value)

sampleForm = new FormGroup({
  dateProp: new FormControl(new Date(prop))
});

or use it with pipe

<p-calendar
    [showIcon]="true"
    [ngModel]="value | date:'dd/MM/yyyy hh:mm a'"
    (ngModelChange)="onChange()"
    appendTo="body"
></p-calendar>

or use primeng calendar property dataType="string" and work with strings only. Btw i got same bug and spent couple of hours