Question

我正在开发一个管理员，用户可以在其中添加X个单元格。每个单元格包括：

名称
IMAGEURL
目标链接

用户可以批量添加单元格（从8开始，一次可以添加20个）或一次添加一个单元格。

我需要验证每个字段以确认它们是好的。我曾计划使用角度形式验证。不幸的是，要求用户拥有X＃个项目，但只填写一半（将任何整个单元格留空）只是忽略整个单元格。

问题在于，如果加载了10个单元格，则表单（保存所有单元格）是原始/无效的。我填写所有10个项目，表格现在是脏的/有效的。我再加5个，表格很脏/无效。填写其中2个单元格并想提交，当我希望它变脏/有效时，表格仍然是脏/无效

对此有何想法？

示例plunkr：http://plnkr.co/edit/qwObH5LnxLvgJydJlJVS?p=preview

如果我可以在不使用表单标签的情况下执行此操作，则可以获得奖励。

Answer 1

我在plunkr上看到了你的例子。

添加删除按钮，用户可以删除不想填写的行。因此表单返回脏/有效状态。

Answer 2

听起来您希望空行有效，但非空行中的空输入字段无效。

要实现这一点，您可以使用ng-required向每个字段添加条件要求，这样只有在行中的其他位置至少有一些文本时才需要它。

从您的plunkr，您可以在每个输入上用required替换ng-required：

<li ng-repeat="cell in cells">
    <input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="cell.src || cell.name"/>
    <input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="cell.dest || cell.name"/>
    <input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="cell.src || cell.dest"/>
</li>

为了提高可伸缩性，您还可以在单元格对象或控制器上定义一个方法来评估单元格对象是否为空白：

function cellCtrl($scope) {
    ...
    $scope.isBlankCell = function(cell) {
        ...
    }
}

并从模板中调用该方法：

<li ng-repeat="cell in cells">
    <input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="isBlankCell(cell)"/>
    <input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="isBlankCell(cell)"/>
    <input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="isBlankCell(cell)"/>
</li>

Angular JS表单验证

2 个答案: