remove invalid state when dropdown reset angular ng-select-CodePudding

I am using ng-select plugin for my angular project.

I need to reset second drop down in the first dropdown on change. this is my sample code First dropdown

 <ng-select [items]="branchModel" bindLabel="branchName" required
                        (change)="getPublicBankInfo($event); " name="branchName" bindValue="branchCode"
                        placeholder="Select Branch" [(ngModel)]="reservelocker.branchCode">
                    </ng-select>

Second Drop Down

    <ng-select [items]="lockerSizeModel" bindLabel="sizeText" required #selectDropdown
                                [disabled]="!reservelocker.branchCode" (change)="getLockerInfo($event);" name="sizeText"
                                bindValue="sizeCode" placeholder="Select Locker Size" [(ngModel)]="reservelocker.locker">
</ng-select>

First dropdown function

    getPublicBankInfo(info) {
   // reset second drop down
    this.reservelocker.locker = '';
    console.log(info);
    
}

When i use this code. Drop down reset. but invalid state did not remove. How i do this correctly. have any proper way ?

CodePudding user response：

Set ngModel to template variable selectDropdown to get ngModel Instance. Then you can call reset method on it to remove the ng-select error state.

<ng-select [items]="lockerSizeModel" bindLabel="sizeText" required #selectDropdown="ngModel"
                                    [disabled]="!reservelocker.branchCode" (change)="getLockerInfo($event);" name="sizeText"
                                    bindValue="sizeCode" placeholder="Select Locker Size" [(ngModel)]="reservelocker.locker">
    </ng-select>

Pass Template Reference varaible as a second argument to getPublicBankInfo

<ng-select [items]="branchModel" bindLabel="branchName" required
                        (change)="getPublicBankInfo($event,selectDropdown); " name="branchName" bindValue="branchCode"
                        placeholder="Select Branch" [(ngModel)]="reservelocker.branchCode">
</ng-select>

component.ts

 getPublicBankInfo(info,ngModelRef) {
   // reset second drop down
    this.reservelocker.locker = '';
    ngModelRef.control.reset(); //Call reset
    console.log(info);
    
}

CodePudding user response：

one way is instead of assigning empty value to this.reservelocker.locker = '' , assign default value from model "branchModel" which you will show when page is loaded.

pass your form reference as a second param to the below function

getPublicBankInfo(info,yourformReference:NgForm) { yourformReference.controls["sizeText"].reset();}

your change function be like below

(change)="getPublicBankInfo($event,yourFormReference);