While debugging my component that utilizes ng-select, I noticed that every time I type into the input field, the ngModel property changes even though I am not explicitly using ngModel in my view. I have removed all instances of ngModel except for the class properties.
<div>
<div class="invlisible" #list>
<div *ngFor="let item of items">{{item}}</div>
</div>
<div class="invlisible" #value>{{ngModel}}</div>
<ng-select [items]="items"
[clearable]="false"
[loading]="loading"
[placeholder]="placeholder"
[typeahead]="typeahead">
</ng-select>
</div>
Even though I have removed all references to ngModel, the value of ngModel changes when I input "x" into the ng-select input field. Here is the simplified component code:
@Component({
selector: 'disco-ng-select',
templateUrl: './disco-ng-select.component.html',
styleUrls: ['./disco-ng-select.component.scss']
})
export class DiscoNgSelectComponent extends CSSProps implements OnInit, OnDestroy {
private _value: any;
@Input() public items: any[];
@Input() public loading: boolean;
@Input() public placeholder: string;
@Input() public typeahead: Observable<any[]>;
@Input() public ngModel: any;
@Output() public ngModelChange = new EventEmitter<any>();
constructor(
_host: ElementRef) {
super(_host);
}
public onChange(value: any) {
this.ngModelChange.emit(value);
}
}
Despite not being directly connected to my component, the ngModel property's value changes when typing in the input field, even when it is empty. How can I ensure that ngModel functions like a typical two-way data binding without using [model]="value"?