AngularJS验证表单数组长度

Question

假设我有一个带有属性的模型对象 favoriteColors

{
    ...
    favoriteColors: ['red', 'green', 'blue']
    ....
}

我用ng-repeat将它们暴露给用户

<form name="userForm">
    ...
    <ul>
        <li ng-repeat="color in user.favoriteColors">
            <input type="text" ng-model="color" />
            <a href="" ng-click="delete(color)">remove</a>
        </li>
    </ul>
    <a href="" ng-click="add()">Add a new favorite color</a>
    ...
</form>

我希望能够检查favoriteColors字段的有效性做这样的事情

<div ng-show="userForm.favoriteColors.$error">
    You must have at least one favorite color
</div>

使用内置的验证器似乎不可能做到这一点,我不确定我会在哪个元素上放置自定义指令以获取ngModelControllerfor favoriteColors.

Answer 1

我的解决方案是添加一个隐藏的输入标记和绑定数组的长度

    <form name="userForm">
      ...
      <ul>
        <li ng-repeat="color in user.favoriteColors">
          <input type="text" ng-model="color" />
          <a href="" ng-click="delete(color)">remove</a>
        </li>
      </ul>
      <a href="" ng-click="add()">Add a new favorite color</a>
      ...

      <!-- new line -->
      <input style="display:none" name="colorsLength" type="number" min=1 value="{{user.favoriteColors.length}}"/>
    </form>

因此,您可以使用userForm.colorsLength.$ error进行验证.祝好运!

Answer 2

@Loi Pham,遗憾的是我不允许评论,所以我必须添加帖子.我喜欢你的方法.但是我必须在输入中添加ng-model以使验证工作:

<input style="display: none" type="number" name="length" readonly ng-model="colors.length" min="1">