ERROR: Expression has changed after it was checked

Issue

I have a formGroup that has a "date" field and a "satisfaction" field in it. In my HTML, I have made a dropdown for the "satisfaction" field that renders on the 7th page. For some reason, when this dropdown is rendered, the "date" field gets reset, which is a problem because I had previously reformatted the date.

<label for="rating">How would caller rate their service today?</label>
<select formControlName="satisfaction" id="rating">
     <option value="Excellent">Excellent</option>
     <option value="Good">Good</option>
     <option value="Fair">Fair</option>
     <option value="Poor">Poor</option>
</select>

I know the problem is this dropdown, because if I remove it, the error does not occur. This is the error...

I have no idea why this dropdown is affecting the date field. I don't even have to click the dropdown, it throws the error as soon as it is rendered on screen. Any thoughts are appreciated.

EDIT:

this is operators-form.component.html line 5.

    <p>Date/Time: {{formValue.value.date}}</p>

this is the input field for the date time.

<label for="dateinput">Date</label>
<input type="datetime-local" formControlName="date" id="dateinput">

However the input is automatically filled using this function from the TS.

  getDateTime() {
    var newDate = new Date();

    var sMonth = this.padValue(newDate.getMonth() + 1).toString();
    var sDay = this.padValue(newDate.getDate()).toString();
    var sYear = newDate.getFullYear();
    var sHour = newDate.getHours().toString();
    var sMinute = this.padValue(newDate.getMinutes()).toString();

    let defaultDateTime = ''
    defaultDateTime = sYear + "-" + sMonth + "-" + sDay + "T" + sHour + ":" + sMinute;
    this.formValue.patchValue({
      date: defaultDateTime
    });

  }

after advancing past the page with the dat input, it reformats it to a visually friendly look with this -

  changeDateTimeInputValue(){
    let inputTime = this.formValue.value.date;
    let splitArray = inputTime.split("");
    let month = splitArray[5] + splitArray[6];
    let day = splitArray[8] + splitArray[9];
    let year = splitArray[0] + splitArray[1] + splitArray[2] + splitArray[3];
    let hour = splitArray[11] + splitArray[12];
    let minute = splitArray[14] + splitArray[15];
    let AMPM = "AM";
    let parseHour = parseInt(hour);
    if(parseHour > 12){
      AMPM = "PM";
      parseHour = parseHour - 12
    } else
    if(parseHour === 0){
      parseHour = 12
    }
    if(parseHour < 10){
      hour = "0" + parseHour;
    } else {
      hour = parseHour.toString();
    }
    this.formValue.value.date = month + "/" + day + "/" + year + " " + hour + ":" + minute + " " + AMPM;
  }

As far as I can tell, there is nowhere that connects the "satisfaction" field to the "date" field, except for the fact that they're in the same form group.

Solution

Most likely the point you are calling changeDateTimeInputValue results in it executing during a lifecycle event causing the Expression changed error.

Leave the form value as is, and use the Angular date pipe to transform it for display (adjust format to suit your needs):

<p>Date/Time: {{ formGroup.value.date | date : 'M/dd/yyy h:mm a' }}</p>

Stackblitz: https://stackblitz.com/edit/angular-ivy-kewra2?file=src%2Fapp%2Fhello.component.html

Answered By - wlf