fix: Check if change detector is not destroyed

Author: anjmao

src/demo/app/reactive-forms.component.ts

@@ -7,27 +7,21 @@ import {HttpClient} from '@angular/common/http';
     selector: 'reactive-forms',
     template: `
         <form [formGroup]="heroForm" novalidate>
-
-            <div class="form-group">
-                <label for="name">Name</label>
-                <input formControlName="name" class="form-control" id="name" placeholder="Enter name">
-            </div>
-
             <div class="form-group">
-                <label for="street">Street</label>
-                <input formControlName="street" class="form-control" id="street" placeholder="Enter street">
-            </div>
-
-            <div class="form-group">
-                <label for="state">City</label>
-                <ng-select [items]="cities"
+                <label for="state">Cities</label>
+                <ng-select *ngIf="isCitiesControlVisible"
+                           [items]="cities"
                            bindLabel="name"
                            bindValue="id"
-                           placeholder="Select city"
-                           formControlName="city">
+                           [multiple]="true"
+                           placeholder="Select cities"
+                           formControlName="selectedCitiesIds">
                 </ng-select>
+                <br>
+                <button (click)="toggleCitiesControl()" class="btn btn-sm btn-secondary">Show/Hide</button>
+                <button (click)="clearCities()" class="btn btn-sm btn-secondary">Clear</button>
             </div>
-
+            <hr>
             <div class="form-group">
                 <label for="state">Age</label>
                 <ng-select [items]="ages"
@@ -38,7 +32,7 @@ import {HttpClient} from '@angular/common/http';
                 <br>
                 <button class="btn btn-secondary btn-sm" (click)="toggleAgeDisable()">Toggle disabled</button>
             </div>
-
+            <hr>
             <div class="form-group">
                 <label for="album">Favorite album</label>
                 <ng-select [items]="albums"
@@ -53,7 +47,7 @@ import {HttpClient} from '@angular/common/http';
                 </ng-select>
                 <small class="form-text text-muted">Albums data from backend using HttpClient.</small>
             </div>
-
+            <hr>
             <div class="form-group">
                 <label for="album">Favorite photo</label>
                 <ng-select [items]="photos"
@@ -81,10 +75,12 @@ export class ReactiveFormsComponent {
 
     heroForm: FormGroup;
 
+    isCitiesControlVisible = true;
     cities: NgOption[] = [
         {id: 1, name: 'Vilnius'},
         {id: 2, name: 'Kaunas'},
-        {id: 3, name: 'Pavilnys', disabled: true}
+        {id: 3, name: 'Pavilnys (Disabled)', disabled: true},
+        {id: 4, name: 'Pabradė'},
     ];
 
     ages: NgOption[] = [
@@ -105,9 +101,7 @@ export class ReactiveFormsComponent {
         this.loadPhotos();
 
         this.heroForm = this.fb.group({
-            name: ['', Validators.required],
-            street: '',
-            city: '',
+            selectedCitiesIds: [],
             age: '',
             album: '',
             photo: ''
@@ -122,6 +116,14 @@ export class ReactiveFormsComponent {
         }
     }
 
+    toggleCitiesControl() {
+        this.isCitiesControlVisible = !this.isCitiesControlVisible;
+    }
+
+    clearCities() {
+        this.heroForm.get('selectedCitiesIds').patchValue([]);
+    }
+
     private loadAlbums() {
         this.http.get<any[]>('https://jsonplaceholder.typicode.com/albums').subscribe(rsp => {
             this.albums = rsp;

src/lib/src/ng-select.component.ts

@@ -1,6 +1,7 @@
 import {
     Component,
     OnInit,
+    OnDestroy,
     forwardRef,
     ChangeDetectorRef,
     Input,
@@ -41,7 +42,7 @@ const NGB_ANG_SELECT_VALUE_ACCESSOR = {
         'role': 'dropdown'
     }
 })
-export class NgSelectComponent implements OnInit, ControlValueAccessor {
+export class NgSelectComponent implements OnInit, OnDestroy, ControlValueAccessor {
 
     @ContentChild(NgOptionDirective) optionTemplateRef: TemplateRef<any>;
     @ContentChild(NgDisplayDirective) displayTemplateRef: TemplateRef<any>;
@@ -112,6 +113,10 @@ export class NgSelectComponent implements OnInit, ControlValueAccessor {
         this.bindLabel = this.bindLabel || 'label';
     }
 
+    ngOnDestroy() {
+        this.changeDetectorRef.detach();
+    }
+
     @HostListener('keydown', ['$event'])
     handleKeyDown($event: KeyboardEvent) {
         if (KeyCode[$event.which]) {
@@ -192,8 +197,7 @@ export class NgSelectComponent implements OnInit, ControlValueAccessor {
         } else {
             this._value = null;
         }
-
-        this.changeDetectorRef.detectChanges();
+        this.detectChanges();
     }
 
     registerOnChange(fn: any): void {
@@ -278,15 +282,15 @@ export class NgSelectComponent implements OnInit, ControlValueAccessor {
     }
 
     showPlaceholder() {
-        return this.placeholder && !isDefined(this.value) && !this.filterValue;
+        return this.placeholder && !this.isValueSet(this.value) && !this.filterValue;
     }
 
     showValue() {
-        return !this.filterValue && isDefined(this.value);
+        return !this.filterValue && this.isValueSet(this.value);
     }
 
     showClear() {
-        return this.clearable && isDefined(this.value) && !this.isDisabled;
+        return this.clearable && this.isValueSet(this.value) && !this.isDisabled;
     }
 
     showFilter() {
@@ -437,8 +441,19 @@ export class NgSelectComponent implements OnInit, ControlValueAccessor {
     private isTypeahead() {
         return this.typeahead && this.typeahead.observers.length > 0;
     }
-}
 
-function isDefined(value: any): boolean {
-    return !!value;
+    private detectChanges() {
+        if (!(<any>this.changeDetectorRef).destroyed) {
+            this.changeDetectorRef.detectChanges();
+        }
+    }
+
+    private isValueSet(value: any): boolean {
+        if (this.multiple) {
+            return !!value && value.length > 0;
+        }
+        return !!value;
+    }
 }
+
+