带有角引导程序下拉菜单的自定义验证

Question

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

<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，但尚未经过验证。由于下拉菜单中单击的任何内容均有效，因此我想知道如何在单击按钮时重新使用验证器？也许另一种方法会更好？

Answer 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/如果可以，请上传有关该问题的小提琴。

Answer 2

我尝试了一天以上，但由于此问题的需要，无法使$setValidity正常工作。而是有一个属性：

typeahead-editable="false"

在typeahead库中，是做什么工作的。它清空了鼠标移出的输入框，并将有效性设置为false。