How to reset ng-select upon selecting another ng-select dropdown in angular?-CodePudding

I have 3 ng-selects like below in code, how can I reset other selections upon selecting any one. Like if i select selectOne, then selectTwo and selectThree should be reset. I'm using ng-select library.

<ng-select id="selectOne" formControlName="name1" (change)="someFun()">
   <ng-option *ngFor = "let x of y" [value]="somevalue">{{somevalue}}</ng-option>
</ng-select>

<ng-select id="selectTwo" formControlName="name2" (change)="someFun()">
   <ng-option *ngFor = "let x of y" [value]="somevalue">{{somevalue}}</ng-option>
</ng-select>

<ng-select id="selectThree" formControlName="name3" (change)="someFun()">
    <ng-option *ngFor = "let x of y" [value]="somevalue">{{somevalue}}</ng-option>
</ng-select>

CodePudding user response：

You could write a method to reset others where you pass the changed select as an argument and loop through all the other variable names and reset their values.

resetOther(changedVariable) {
    ['variable1', 'variable2', 'variable3'].filter(k => k != changedVariable).forEach(k => {
        this[k] = undefined;
    });
}

Your Template

<ng-select id="selectOne" formControlName="name1" [(ngModel)]="variable1" (ngModelChange)="resetOther('variable1')">
   <ng-option *ngFor = "let x of y" [value]="x">{{x}}</ng-option>
</ng-select>