时间戳

首页 > 解决方案 > 下拉重置角度 ng-select 时删除无效状态

javascript - 下拉重置角度 ng-select 时删除无效状态

问题描述

我正在为我的角度项目使用 ng-select 插件。

我需要在更改的第一个下拉列表中重置第二个下拉列表。这是我的示例代码第一个下拉菜单

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

第二个下拉

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

第一个下拉功能

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

当我使用此代码时。下拉重置。但无效状态没有删除。我如何正确地做到这一点。有什么适当的方法吗？ 在此处输入图像描述

标签： javascriptangular

解决方案

将 ngModel 设置为模板变量 selectDropdown 以获取 ngModel 实例。然后你可以在它上面调用 reset 方法来移除 ng-select 错误状态。

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

将模板引用变量作为第二个参数传递给 getPublicBankInfo

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

组件.ts

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

推荐阅读