角度ng-select验证选择

时间:2018-11-16 15:26:23

标签: angular angular-ngselect

我有一个ng-select选择框和一个Apply按钮,用于确认选择。有一个对象,具有 id 名称,并且所有名称都显示在用户选择。

想法是,用户选择一个名称(他可以键入以过滤结果),然后进行确认,将所选选项发送到服务器并将其保存到数据库。

问题在于,用户也可以输入无效的输入(不存在的名称)并确认,而不是从过滤的结果中选择选项。我不想让这种事情发生。

如果输入无效,我想禁用“应用”按钮(这表示尚未从结果中选择该输入,并且该输入与任何结果都不匹配,以防用户仅正确输入名称且未单击而已在下拉菜单中)。我该怎么办?

这是我的代码:

<ng-select [items]="allPersons" [(ngModel)]="currentPersonId" 
    bindLabel="name" bindValue="id"
    (change)="storeNewPersonName($event)">
</ng-select>
<button (click)="updatePerson()">
    <strong>Apply</strong>
</button>
每次用户从下拉列表中选择一个名称时,都会调用

storeNewPersonName($ event)函数。它将名称存储在变量中。然后在updatePerson()中,将该变量转换为Person对象并发送到服务器。

tl;博士

因此,基本上,我需要将当前输入作为用户类型,将其与所有现有的“人名”(我存储在数组中)进行比较,并在输入不匹配或为空时禁用确认按钮,然后启用否则。

有什么想法吗?谢谢您的帮助。

0 个答案:

没有答案