javascript - 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>

使用内置验证器似乎无法做到这一点，而且我不确定我会在哪个元素上放置自定义指令以获得 的 ngModelController最喜欢的颜色。

Answer 1

我的解决方案是添加一个隐藏的输入标签并绑定(bind)数组的长度

    <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 进行验证。 祝你好运!