Expression has changed after it was checked. Previous value: 'true'. Current value: 'false' on open kendo-datepicker for angular in modal dialog

Question

I'm working on angular 4 app. I have installed angular - 4.0.3, bootstrap - 3.3.7, ng-bootstrap - 1.0.0-alpha.15, @progress/kendo-angular-dateinputs - ^1.0.3.

I open modal dialog that have inside kendo-datepicker. When I click on open datepicker icon I have error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

I tried to add

import { Component, OnInit, OnDestroy, AfterViewChecked, AfterContentChecked, ChangeDetectorRef } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

@Component({
    selector: "ac-task-modal",
    templateUrl: "./app/core/modals/task-modal.component.html"
})
export class AddTaskModalComponent implements OnInit, OnDestroy, AfterViewChecked, AfterContentChecked {
    fromDate = new Date();
    dueDate? = new Date();
    taskForm: FormGroup;

    constructor(private ref: ChangeDetectorRef,
        public activeModal: NgbActiveModal,
        private modalService: NgbModal,
        private readonly formBuilder: FormBuilder) {
    }

    ngOnInit() {
        this.buildForm();
    }

    ngAfterViewChecked(): void {
        this.ref.detectChanges();
    }

    ngAfterContentChecked(): void {
        this.ref.detectChanges();
    }

    buildForm() {
        this.taskForm =
            this.formBuilder.group({
                description: this.task.description,
                note: "",
                assignee: new FormControl()
            });
    }

    ngOnDestroy() {

    }
}

But it didn't help. When I insert kendo-datepicker not in modal dialog, it works fine.

Where is the error into kendo-datepicker, ng-bootstrap or angular? And how can I resolve it?

Important note I have theme on my project for bootstrap v3, so I can't update ng-bootstrap to the latest version, because the latest versions for bootstrap v4, correct me if I'm wrong.

mmm the problem is related to the angular devmode ..which do adouble check of the variables changes ... i think it is related to yours fromDate = new Date(); dueDate? = new Date(); fields ... cause their values changes from when you declare them... do you need them with seconds? ..or try ti investigate on them — federico scamuzzi, Dec 27 '17 at 09:44
No, i don't need it with seconds, just day, month, year. Very strange, because it works on simple page not in modal dialog. — A. Gladkiy, Dec 27 '17 at 09:55
just give a try ... try to set with only days and month and year and test it — federico scamuzzi, Dec 27 '17 at 10:02
if you mean this `new Date(2017, 12, 12)` then I have the same error. — A. Gladkiy, Dec 27 '17 at 10:12

score 0 · Answer 1 · answered Dec 28 '17 at 09:58

You can try upgrading to the latest version of the Kendo UI for Angular DateInputs (currently 1.4.2) - the DatePicker seems to be working as expected in a Bootstrap 4 modal:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Select a date:</p>
            <kendo-datepicker
                [(value)]="value"
            ></kendo-datepicker>
            <p>(use Alt+↓ to open the calendar, ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

PLUNKER

I use UI theme with Bootstrap 3.3.7. Also I use ng-bootstrap plugin to inject modal dialogs everywhere I want. But in your way I need to put html into every component where I need modal dialog. — A. Gladkiy, Jan 10 '18 at 07:42

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false' on open kendo-datepicker for angular in modal dialog

1 Answers1