0

When I click on one of the item under the list and go to the detail page, it throws ExpressionChangedAfterItHasBeenCheckedError and a DebugContext.

I was able to strip down my original project to plunker and reproduce the error. The error happens only with Textarea. If I replace Textarea with Input it is fine.

Plunkr Link

The exception

See the 3rd comment for a link and details of live example.

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { BeginEventEmitter, EndEventEmitter } from './emitter';
import { SelectSourceService } from "./sourceselect.service";

import { CodeService } from "./codes.service";
import { Code } from "./code"

@Component(
    {
        selector: 'Detail',
        template: `    <h3>Details</h3>
    <form>
      <div class="form-group">
        <label for="id">ID</label>
        <input type="text" class="form-control" id="id" name="id" [(ngModel)]="theCode.id">
      </div>
      <div class="form-group">
        <label for="description">description</label>
        <textarea class="form-control" id="description" name ="description" rows=10 cols=30 [(ngModel)]="theCode.description"></textarea>
      </div>
      <button type="button" class="btn btn-default" (click)="OnFormSubmit()">Submit</button>
    </form>`
    })
export class DetailsComponent implements OnInit, OnDestroy  {

    theCode: Code;
    id: string;
    showLoader: boolean = true;
    source : string;

    setDetail(): void {
        this.theCode = this.codeService.getCode4Id(this.source, this.id);
    }

    constructor(private codeService: CodeService, private route: ActivatedRoute, private router: Router, 
        private _selSourceService: SelectSourceService, private opening:BeginEventEmitter, private closing:EndEventEmitter) {

    }

    ngOnInit()
    {
        this.route.params
            .subscribe(value => this.id = value['id']);
        this.subscription = this._selSourceService.sourceSelection$.subscribe((selection: string) => { this.source = selection; this.setDetail(); });
        this.opening.emit("Opening Details for " + this.id);
    }

    ngOnDestroy() {
        this.closing.emit("Closing Details for " + this.id);
    }

    OnFormSubmit(data: Code): void {
        alert("The Changes were submitted");
        this.router.navigate(['/Codes']);
    }

    OnFormCancel() : void {
        alert("The form was cancelled");
    }
};
padhu
  • 155
  • 3
  • 11
  • The article [Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error](https://medium.com/@maximus.koretskyi/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) explains this behavior in great details – Max Koretskyi Jul 02 '17 at 05:27

1 Answers1

1

Open your app component then find ngOnInit hook and try replacing

this.openDetails.subscribe(() => { this.detailOpen++; })

with

this.openDetails.subscribe(() => Promise.resolve(null).then(() => this.detailOpen++));

Updated Plunker

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • thanks. why that worked? also I did the same change to my original project and it did not help. – padhu Jun 16 '17 at 21:53
  • It works because it is executes in the next view check. Can you show me live example where it is not working? – yurzui Jun 17 '17 at 03:46
  • Here is the [test](http://adsportal.myadsc.com/testcode/Practices/) site deployed. use Test1@a.com and Test1@a.com to login. Click on one of the item in detail and scroll down and hit save. you would notice 1. the errors 2. after success alert it fails to load the list. 3. the dropdown list should be enabled when back to list page but it remains disabled. – padhu Jun 19 '17 at 19:53
  • I need a minimal example. I don't have access to your site `This site has been blocked by the network administrator` – yurzui Jun 21 '17 at 19:30
  • http://adsportal.myadsc.com/testcode I just used this link http://adsportal.myadsc.com/testcode to signin from chrome and IE and was able to login with the info above and go into Practices. Could you try again and let me know at what point you get the error. thanks – padhu Jun 22 '17 at 01:13
  • I don't have access to your domain – yurzui Jun 22 '17 at 15:33
  • I suspect some restriction from your network. I was able to access even from 3rd party wifi hotspot. – padhu Jun 22 '17 at 17:23
  • I modified the original plunkr and posted a new question [here](https://stackoverflow.com/questions/45021564/expressionchangedafterithasbeencheckederror-from-angular) Thanks – padhu Jul 10 '17 at 21:06