使用 Angular Bootstrap 下拉菜单进行自定义验证答案

【问题标题】：Custom Validation With Angular Bootstrap Dropdown使用 Angular Bootstrap 下拉菜单进行自定义验证
【发布时间】：2020-03-30 16:04:13
【问题描述】：

情况是这样的。我有一个角度引导下拉菜单，其中显示要选择的“组织”列表。它看起来像这样：

<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
  <span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu">
  <li ng-repeat="org in organizations | orderBy:'Name'"><a href="#" ng-click="pickNewOrg(org)">{{org.Name}}</a></li>
</ul>

我还有一个文本输入，允许输入组织名称，使用 Angular 的引导程序预先输入和自定义验证器，以确保输入的组织实际上在我的组织列表中。它看起来像这样：

<input name="organization" 
  type="text" 
  ng-model="activity.org" 
  typeahead="org as org.Name for org in organizations | filter:$viewValue" 
  valid-organization/>

问题是：如果将文本输入到输入中（验证器指令所在的位置），验证工作正常，但如果从下拉列表中选择对象，则不会调用验证。因此，如果输入了不正确的组织，则有效性设置为 false，但如果随后从菜单中单击组织，则它仍然为 false，未经验证。由于在下拉列表中单击的任何内容都是有效的，我想知道如何在单击按钮时重新使用验证器？或者也许另一种方法会更好？

【问题讨论】：

如果将valid-organization 指令添加到下拉列表会发生什么？
没什么，当点击下拉菜单中的按钮时，模型在范围内发生变化，因此输入中的值会自动更新，但不会触发验证器这样做。我想知道是否没有办法强制表单进行自我验证。

标签： angularjs validation angular-ui-bootstrap

【解决方案1】：

我的应用程序也遇到了同样的情况，如果项目无效，我决定禁用我的添加按钮。就我而言，我知道有效的对象有一个 .id 道具，所以我做了类似的事情

    <input name="organization" 
  type="text" 
  ng-model="activity.org" 
  typeahead="org as org.Name for org in organizations | filter:$viewValue" />
  <button ng-click="doSomething()" ng-disabled="!activity.org.Name">Do Something</button>

如果输入的组织无效，“activity.org”中将只有一个文本值，没有“.Name”属性，因此该按钮将被禁用。

我不确定您选择的组织是做什么的，但我希望它能给您一个方向。无论如何，我没有看到让您在下拉列表中重复使用“有效组织”的简单方法。

编辑：

您可以像这样使用表单和输入的名称属性手动设置有效性

$scope.formName.inputName.$setValidity('validOrganization',true);

实际上，即使没有它，它也应该在您的场景中工作。这是尝试重新创建一个简单的小提琴来演示 - http://jsfiddle.net/B3WLH/ 如果可以，请上传一个解决问题的小技巧。

【讨论】：

如果我理解正确，这将不允许我输入不正确的内容，请改变主意并改为单击下拉菜单。对于这个应用程序，我不希望那个按钮被禁用。如果我可以说“嘿，表单，再次验证自己”，或者有某种方式明确地将验证器设置为有效，那将是很棒的，每当单击菜单中的按钮时。
嘿，安迪，我不是要禁用下拉菜单，而是选择后的操作，但由于没有提及，所以很难知道。
我在上面更新了我的回复，包括如何手动设置验证，但我测试了一个简单的场景，看起来它应该可以工作。如果可以的话，上传一个小提琴，我会采取仔细看看:)
你是对的，答案是像你的小提琴一样在指令中添加 $formatters，而不仅仅是像我的指令中那样添加 $parsers。我应该一开始就发布我的指令，但我认为这无关紧要。

【解决方案2】：

我尝试了一天多，但无法让 $setValidity 像这个问题一样工作。相反，有一个属性：

typeahead-editable="false"

在 typeahead 库中哪种类型的工作。它会在鼠标移出时清空输入框，并将有效性设置为 false。

【讨论】：