ng标记输入在最大标记号后禁用输入

时间:2017-03-15 18:00:59

标签: angularjs ng-tags-input

我有一个问题,也许有人在您的应用程序中使用ngTagsInput

插入最大标签数量后是否有禁用输入的选项?

1 个答案:

答案 0 :(得分:2)

ngTagsInput有一个ngModel接受标记数组,因此您可以使用ngDisabled来禁用输入。

问题是如果您的输入被禁用,您将无法删除任何已存在的标签并进一步编辑输入。我不建议这样做。

但是你有一些替代方案......

  1. 验证您拥有的代码数量
  2. API docs状态max-tags属性用于验证输入内的最大标记数量,当超出限制时,验证状态将转为$invalid,您可以然后阻止表单提交。

      

    maxTags - 数字 -   如果添加的标记数大于maxTags,则设置maxTags验证错误密钥。

    例如:

    <tags-input ng-model="tags" max-tags="7">
      <auto-complete source="loadTags($query)"></auto-complete>
    </tags-input>
    
    1. 使用on-tag-added回调属性来捕获用户何时超出允许的标签数量,并删除他输入的任何新标签,而无需使用验证标志
    2. <强> HTML:

      <tags-input ng-model="tags" 
          on-tag-added="onTagAdded($query, 7)"></tags-input>
      <p>Model: {{tags}}</p>
      

      <强>控制器:

      $scope.onTagAdded = function(tag, limit) {
          if ($scope.tags.length == limit+1) {
              $scope.tags.pop();
          }
      }
      

      在上面的示例中,我们将标签数量限制为7。