remove invalid state when dropdown reset angular ng-select

Issue

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 ?

Solution

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.

or

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);

Answered By - sivapagolu