Pfthb

I keep getting this error and I can't seem to find a way to fix this. I using this angular 4 datepicker in my project and in this error occurs when it detects change on the dateChanged event.

Here's my full error:

EditApplicationComponent.html:522 ERROR Error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed
after it was checked. Previous value: '[object Object]'. Current
value: ''.

Here's my html.

<tr *ngFor="let rpr of DocumentMode">

<td style="width: 18%">

<my-date-picker name="from" [options]="DocDatePickerOptions" (dateChanged)="onDocDateChanged($event, rpr)" [ngModelOptions]="standalone: true" [placeholder]="placeholder"
 [ngModel]="rpr.SD_VALID_FROM" ></my-date-picker>
</td>
<tr>

Here's how I binded and get value to the datepicker. in sample.ts

OnInit()

 this.DocDateRetreive();




DocDateRetreive() 
 console.log("came here", this.DocumentMode);
 for (var i = 0; i < this.DocumentMode.length; i++) 
 if (this.DocumentMode[i].SD_VALID_FROM == null) 
 // this.validFrom[i] = new Date();
 
 else 
 console.log("from:", this.DocumentMode[i].SD_VALID_FROM);

 var validFromTemp = [new Date(this.DocumentMode[i].SD_VALID_FROM)];

 for (var j = 0; j < validFromTemp.length; j++) 
 console.log("valid from temp:", validFromTemp[j]);
 this.validFrom[i] = date: year: validFromTemp[j].getFullYear(), month: validFromTemp[j].getMonth() + 1, day: validFromTemp[j].getDate() ;
 
 console.log("valid", this.validFrom[i]);
 this.DocumentMode[i].SD_VALID_FROM = this.validFrom[i];
 
 
 


 onDocDateChanged(event: IMyDateModel, rpr) 

 var date = event.formatted;
 rpr.SD_VALID_FROM = date;
 console.log("changed", rpr.SD_VALID_FROM);

 


readThis(inputValue: any, rpr): void 

 myReader.onloadend = (e) => 
 this.FileString = myReader.result;
 // rpr.SD_VALID_FROM = this.validFrom.formatted;
 for (var i = 0; i < this.DocumentMode.length; i++) 
 if (this.DocumentMode[i].DOC_ATTCHE_PATH == rpr.DOC_ATTCHE_PATH) 

 this.DocumentMode[i].SD_VALID_FROM = rpr.SD_VALID_FROM.formatted;
 this.DocumentMode[i].SD_VALID_UNTIL = rpr.SD_VALID_UNTIL;
 this.DocumentMode[i].IS_CHECK = true;
 
 
 
 myReader.readAsDataURL(file);

 

The Datepicker works fine but when it first loads the DOM the error occurs. How do I resolve this issue. Help would be appreciated.

Try doing this this.DocDateRetreive(); after view init.
there is an angular lifecycle hook called AfterViewInit. You need to implement the inteface in your component class.

export class YourComponent implements AfterViewInit
constructor()
/*Whatever*/


 ngAfterViewInit(): void
 this.DocDateRetreive();
 

This should solve your problem.

If the incoming data you use is making the problem, then you need to go for
AfterContentInit

export class YourComponent implements AfterContentInit 
 constructor()
 /*Whatever*/
 

 ngAfterContentInit (): void
 this.DocDateRetreive();