Angular JS Form Validation

Question

我正在研究一個管理員，用戶可以添加X個單元格。每個單元包括：

• 名稱
• IMAGEURL
• 目的地鏈路

用戶可以批量添加細胞（具有8啓動時，他們可以添加20在一次）在一個時間或一個。

我需要驗證每個字段以確認它們是否正確。我曾計劃對此使用角度表單驗證。不幸的是，如果用戶擁有X＃個項目，但只填寫了一半（將整個單元格留空），則會忽略該單元格作爲整體。

問題在於，如果加載時有10個單元格，則表單（包含所有單元格）是原始/無效的。我填寫了所有10個項目，表格現在很髒/有效。我再加5個，表格很髒/無效。填寫這些單元格中的2個，並希望提交，表格仍然髒/無效，當我希望它變髒/有效

對此有何看法？

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

，如果我可以做到這一點，而無需使用一種形式的標籤的獎勵積分。

Answer 1

這聽起來像你想空行是有效的，但非空行中的空輸入字段是無效的。

要達到此目的，您可以使用ng-required向每個字段添加條件要求，以便僅在行中其他位置至少有一些文本時才需要。

從你plunkr，你可以在每個輸入與ng-required替換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> 

Answer 2

我看到你在plunkr上的例子。

添加一個刪除按鈕，用戶可以刪除不想填充的行。所以表單會回到髒/有效狀態。