In my table, there is a child component called modal which contains two buttons - save and cancel for inline editing. I am aware that I need to utilize "ChangeDetectorRef", but I am struggling to implement the event "ngAfterViewInit" in my code.
An error occurred: ExpressionChangedAfterItHasBeenCheckedError: The value of 'disableEditSaveButton' has changed after it was checked. Previous value: 'false'. Current value: '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>
</td>
<td>
<button (click)="save(row)">Save</button>
</td>
</tr>
</ng-template>
</p-table>
dashboard.component (which is causing the ExpressionChangedAfterItHasBeenCheckedError)
isEmpty(input) {
if (input.replace(/\s/g, '') === "") {
this.disableSaveButton = true;
} else {
this.disableSaveButton = false;
}
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 ExpressionChangedAfterItHasBeenCheckedError is still being thrown by the browser.
Component
isEmpty(input) {
this.cdr.detach();
if (input.replace(/\s/g, '') === "") {
this.disableSaveButton = true;
} else {
this.disableSaveButton = false;
}
// restart change detection for this view
this.cdr.reattach();
return input.replace(/\s/g, '') === "";
}