Angular ExpressionChangedAfterItHasBeenCheckedError with inline edit table

Question

I have a table where it calls a child component called modal, modal component has two buttons save and cancel that are used for inline edit. I know I have to use "ChangeDetectorRef" but I cant figure out how to use the event "ngAfterViewInit" wit my code

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

dashboard.HTML

 <p-table #dt  [value]="iToDoList" dataKey="id"  [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                             [rows]="10">

                        <ng-template pTemplate="header">
                            <tr>
                                <th>ID</th>
                                <th>Comment</th>
                                <th>Action</th>

                            </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-row>  
                                <tr>
                                    <td>{{row.id}}</td>
                                    <td>
                                        <div  *ngIf="!row.isEditable">{{row.comment}}</div>
                                        <div *ngIf="row.isEditable">
                                            <input type="text" [(ngModel)]="row.comment">
                                            <span *ngIf="isEmpty(row.comment)" style="color:crimson">Required</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <modal  [disableEditSaveButton]='disableSaveButton' (open)="onOpen(row)" [showModal]="!row.isEditable"  (selectedRow)="onSelectedRow(row)" (cancelEdit)="onCancelEdit(row)"></modal>
                                        </div>
                                        <!--<button (click)="editRow(row)">Edit</button>-->
                                    </td>
                                    <td>                                <button (click)="save(row)">Save</button></td>
                                </tr>
                            </ng-template>

                    </p-table>

dashboard.compnent (this is causing ExpressionChangedAfterItHasBeenCheckedError)

 isEmpty(input) {
        if (input.replace(/\s/g, '') === "") {

            this.disableSaveButton = true;
        }
        else {
            this.disableSaveButton = false;
       }
       // this.cdr.detectChanges();

        return input.replace(/\s/g, '') === "";
    }

modal.html

   <div *ngIf='!showModal'>
        <button type="button" class="btn-xs btn-primary" (click)="onSave()" [disabled]='disableEditSaveButton'>Save</button>
        <button type="button" class="btn-xs btn-orange" (click)="onCancelEdit()">Cancel</button>
    </div>

modal.component

@Input() disableEditSaveButton: boolean = false;

******************UPDATE*************************************************************************

the browser it is still throwing ExpressionChangedAfterItHasBeenCheckedError

Component

   isEmpty(input) {

        this.cdr.detach();

        if (input.replace(/\s/g, '') === "") {

            this.disableSaveButton = true;
        }
        else {
            this.disableSaveButton = false;
        }
        // this.cdr.detectChanges();

        // restart change detection for this view
        this.cdr.reattach();

        return input.replace(/\s/g, '') === "";
    }

I saw this article and i tried doing ngAfterViewInit() { this.cdr.detectChanges(); } it still it does not work because, I am setting the child input not within the ngAfterViewInit. Not sure how would I do that, if the child values needs to be set in the "isEmpty" method — rgoal
I used setTimeout, it worked but very slow...I need a better solution — rgoal

Lynx 242 Lynx 242 · Accepted Answer · 2018-05-30T19:25:57

Okay, so here comes another approach.

Analysing your code I could see that

this.disableSaveButton === isEmpty(row.comment)

This means that, if isEmpty(row.comment) is true, this.disableSaveButton is true too and the other way round.

So why don't you directly use the result of isEmpty(row.comment) instead of storing it into this.disableSaveButton ? Doing this you have no changing expression as the first true or false will also be the last.

Please, try it this way:

<modal  [disableEditSaveButton]='isEmpty(row.comment)' 
        (open)="onOpen(row)" 
        [showModal]="!row.isEditable"  
        (selectedRow)="onSelectedRow(row)" 
        (cancelEdit)="onCancelEdit(row)">
</modal>

And if you don't need this.disableSaveButton for other purposes than your modal dialogue, which means you don't need it at all now, you could shrink the size of your method to this, without changing it's logical outcome.

isEmpty(input) {
    return input.replace(/\s/g, '') === "";
}

Angular ExpressionChangedAfterItHasBeenCheckedError with inline edit table

2 Answers