Angular JS 表单验证答案

【问题标题】：Angular JS Form ValidationAngular JS 表单验证
【发布时间】：2014-04-17 20:37:56
【问题描述】：

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

姓名
图片网址
目标链接

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

我需要验证每个字段以确认它们是好的。我曾计划为此使用角度表单验证。不幸的是，有一个要求规定，如果用户有 X # 个项目，但只填了一半（将任何整个单元格留空），则忽略该单元格作为一个整体。

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

对此有什么想法吗？

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

如果我可以在不使用表单标签的情况下做到这一点，则可以加分。

【问题讨论】：

标签： javascript forms angularjs validation

【解决方案1】：

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

要实现这一点，您可以使用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>

【讨论】：

这很有效，感谢您的帮助。你已经恢复了对互联网人性的信心。

【解决方案2】：

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

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

【讨论】：

虽然我很欣赏这个评论，但这不是问题所在。有 X 按钮，但这是用户体验的问题。客户可能不是最聪明的，但我们应该让他们的生活更轻松。