ViewDestroyedError: Attempt to use a destroyed view: detectChanges

Is this a bug, enhancement, or feature request?

Bug

Briefly describe your proposal.

There is an open bug issue for angular that effects also the fundamental-ngx components: https://github.com/angular/angular/issues/27803

fundamental-ngx components are using the ControlValueAccessor like in the Checkbox. The API’s of this interface (e.g. writeValue) are called if some API’s of the bined formControl is called (e.g. patchValue). Inside the writeValue API, you are calling: “this._changeDetectorRef.detectChanges();”, which causing following error if the component is destroyed:

ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
    at viewDestroyedError (core.js:19641)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:30040)
    at checkAndUpdateView (core.js:29439)
    at callWithDebugContext (core.js:30309)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:30011)
    at ViewRef_.push.../../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:20686)

After the error, the component is also not working fine. The checkbox doesn’t reacts anymore on the clicks.

This happens, if the component will be destroyed, but the formControl will still in use. See following example code:

<div fd-form-item [formGroup]="myformGroup">

  <div *ngIf="( viewMode$ | async ) === 'EDIT'"> 
      <fd-checkbox [formControlName]="someFormControl"></fd-checkbox>
  </div>

  <div *ngIf="( viewMode$ | async ) === 'DISPLAY'"> 
     <!--   Just show the value, without combobox  -->
  </div>

</div>

The user can switch the viewMode to ‘DISPLAY’ and therefor, the fd-checkbox will be destroyed. But not the formControl and not the sync between component and formControl. This is the angular issue referenced above. If the user is switching the viewMode back to ‘EDIT’, then the fd-checkbox will be created again and it will use the same formControl. If we are now using some formControl API’s like patchValue, then the error occurs like described above.

Currently, it doesn’t look like that there will be a solution in the next time, because the issue is still active (since 2018) and still referenced (last references on march 2020). But I found a workaround. I have copied the fd-combobox and modified it a bit. Where ever this._changeDetectorRef.detectChanges(); is used, I include this if-clause around it:

        if (!(this._changeDetectorRef as any).destroyed) {
            this._changeDetectorRef.detectChanges();
        }

A separate function for more clean code would also make sense. In this way everything worked fine. No errors was thrown anymore and the checkbox was working fine. I assume that the same solution can work for the other components, which are using the ControlValueAccessor, too.

Which versions of Angular and Fundamental Library for Angular are affected? (If this is a feature request, use current version.)

"@angular/core": "^8.2.12",
"@fundamental-ngx/core": "^0.15.1",

If this is a bug, please provide steps for reproducing it.

See in the description

[JKMarkowski]

Hello @zaheral, sorry for late answer. Thank You for reproducible example. I will let you know, when the solution is prepared. I assume You still use 0.15.*. So we will try to release hot fix in 0.15.4.

[zaheral]

Hi @JKMarkowski,

thanks a lot for the fix. For checkbox it works. But this issue is not just related to checkbox. I’m now using 0.15.4 and face this issue also in the datefield component. Later we want also make use of dateTimeField and TimeField component. I think that a general solution for all components would be even better.

Therefore, can be open this issue again?

Best Regards, Zaher