ng0100 expressionchangedafterithasbeencheckederror with ng-select (@ng-select/ng-select)

Question

I had said error for a dropdown-menu in a form. I stumbled upon the following question on stack: See discussion over ng0100 and angular lifecycle, and tried to solve it different lifecycle-manipulation, changedetection, etc ... . To no avail. Above that I had a warrning that I was still using NgModel in a FormControl which is deprecated. I checked this in the documentation of ng-select (https://www.npmjs.com/package/@ng-select/ng-select), but found that their guide lines still imply the use of NgModel in a Formcontrol.

---

Code snippets

Constructing a form using FormBuilder

constructor( private formBuilder: FormBuilder) {}

In this snippet we reduced the form to just one formcontrol (‘myDropdown’)

private initializeForm () { 
        this.validationService = new ValidationPatternService();
        
        this.searchForm = this.formBuilder.group({
            myDropdown: ['']
        });
    }

And the items (called locationtypes) used to fill up the dropdown are defined as:

locationtypes: KeyValuePair<number, string>[];
    private _selectedlocationtype: locationtypeEnum;
    get selectedlocationtype(): locationtypeEnum {
        return this._selectedlocationtype;
    };
    set selectedlocationtype(value: locationtypeEnum) {
        if (this._selectedlocationtype !== value && value != null) {
            this._selectedlocationtype = value;
        }
        if (value == null) { this._selectedlocationtype = locationtypeEnum._;}        
    }

In the Html-template we have:

<form class="form-horizontal" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
<div >
<ng-select [(ngModel)]="selectedlocationtype" [items]="locationtypes"
bindValue="key" bindLabel="value" formControlName=" myDropdown "
             id="locationtype"
</ng-select>
                                        
                                    </div>
                                </form>

Answer 1

In the end by reducing the NgModel from two-way binding to a one-way binding from view to data-source did the work. [items] takes care of the necessary communication from data to view.

<ng-select (ngModel)="selectedlocationtype"</ng-select>