Expression Changed After It Has Been Checked Error

Date and time pickers
1

I am getting an ExpressionChangedAfterItHasBeenCheckedError reported when I add the following element to my form

<mbsc-input [(ngModel)]="lessonDuration" mbsc-timespan [mbsc-options]="timespanSettings">Duration</mbsc-input>

I have other <mbsc-input> elements in my form that do not cause an issue, and if I comment this line out, all is ok.

I have tried setting lessonDuration to a fixed value in my class, but still get the same issue.

This is what gets reported in the console

ExpressionChangedAfterItHasBeenCheckedError%20Console
ExpressionChangedAfterItHasBeenCheckedError%20Console811Ă—198 11.8 KB

If I set a breakpoint at core.js:7589 I get following chrome debug info

ExpressionChangedAfterItHasBeenCheckedError%20Debug
ExpressionChangedAfterItHasBeenCheckedError%20Debug1672Ă—1054 146 KB

Any ideas ?

2

Hi Dave,

Thanks for the question. You can actually use the <mbsc-timespan> component (which should be the recommended way), that will have the same results as the mbsc-input with the timespan directive. Also makes the code a bit more readable.

<mbsc-timespan [(ngModel)]="lessonDuration" [options]="timespanSettings">Duration</mbsc-timespan>

Please let me know if this works!

Thanks,
Zoli

1 Like
3

Thanks Zoli, that works great - no more errors.

I will convert all my <mbsc-inputs> into their equivalent directives.