0

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.

Ashane Alvis
  • 770
  • 2
  • 18
  • 42
  • Have you seen this: https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained ? – Titian Cernicova-Dragomir Nov 15 '18 at 09:22
  • 1
    Possible duplicate of [ExpressionChangedAfterItHasBeenCheckedError Explained](https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained) – Bytech Nov 15 '18 at 09:49
  • Günter Zöchbauer from the link Titian posts above perfectly explains the problem and why it really should be addressed. At the time of writing, Günter's answer is second in popularity, behind the first by just one vote. No answer was marked as officially accepted. – Bytech Nov 15 '18 at 09:52

1 Answers1

0

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();
        }
    }
Jins Peter
  • 2,368
  • 1
  • 18
  • 37