使用AngularJS驗證動態創建的「輸入」元素

我有一個表格顯示幾個條目，每個條目都有一個<input>。用戶可以通過點擊「添加條目」按鈕來動態添加額外的輸入。我需要在保存和驗證每個之前對它們進行迭代。我簡化了我的示例，檢查每個輸入的值是否大於100（最終我將使用模式匹配來驗證MAC和IP地址）。使用AngularJS驗證動態創建的「輸入」元素

我可以處理它，如果我可以選擇所有<input> s，但我真的想使用我已經在我的範圍內已有的索引來選擇特定的<input>。我讀angular.element是一種方式，但我需要選擇一些動態創建的東西，因此不會像id="myInput"那樣簡單地命名。除非我使用id的「輸入」，並在id屬性中添加一個唯一的數字與Angular的$ index？

Here是我的小提琴，顯示我在做什麼。第44行是一個if()，它應該檢查任何<input>是否大於100.「保存行」按鈕確認輸入大於100，但是如果您編輯一行，我需要「保存」按鈕來驗證任何用戶已編輯（通過單擊旁邊的編輯）。

tl; dr：如何使用Angular選擇動態創建的<input>？

來源

2016-11-27 SpaceNinja

你想多次編輯？ – Aruna

@Aruna好，因爲每行有幾個輸入，只有在你點擊編輯之前才隱藏，然後是的，我將有多個輸入用於編輯。如果您在問題中查看小提琴，它會顯示確切的情況。謝謝你看看。 – SpaceNinja

當我單擊一行中的編輯按鈕時，更改該值，然後單擊另一行上的編輯按鈕（不點擊「保存」），其更新第一行，然後第二行進入編輯模式。這是你想要的，或者你想先保存然後再編輯。請指教？ – Aruna

我曾經在一個乾淨的方式更新您的提琴，讓您可以在兩個加一個通用的方法保持驗證&編輯。

function validateBinding(binding) { 
    // Have your pattern-match validation here to validate MAC and IP addresses 
    return binding.ip > 100; 
}

更新小提琴：

https://jsfiddle.net/balasuar/by0tg92m/27/

另外，我有固定的當前問題與編輯，你必須允許多個編輯，而不點擊下一行下一次編輯時節省的第一行。

「保存所有內容」的驗證現在變得更清晰，如下所示。

$scope.changeEdit = function(binding) { 
    binding.onEdit = true; 
    //$scope.editNum = newNum; 
    $scope.showSave = true; 
    }; 

$scope.saveEverything = function() { 
    var error = false; 
    angular.forEach($scope.macbindings, function(binding) { 
     if(binding.onEdit) { 
      if (validateBinding(binding)) { 
      binding.onEdit = false; 
      } else { 
      error = true; 
      } 
     } 
    }); 

    if (error) { 
     alert("One/some of the value you are editing need to be greater than 100"); 
    } else { 
     $scope.showSave = false; 
    } 
    }

您可以檢查更新搗鼓一樣，

https://jsfiddle.net/balasuar/by0tg92m/27/

注意：由於您使用的角度，你可以驗證模型如上沒必要檢索和循環用於驗證的輸入元素。同樣對於你的情況，驗證模型就足夠了。

如果您需要一些高級驗證，您應該創建一個自定義的 directive。由於在AngularJS中不推薦使用 controller中的元素。

來源

2016-11-28 01:14:29 Aruna

你搖滾！謝謝。我會用這些建議。 – SpaceNinja

您可以對要驗證的輸入使用自定義類。然後，您可以選擇所有這些類別的輸入並驗證它們。看到這個小提琴https://jsfiddle.net/lealceldeiro/L38f686s/5/

$scope.saveEverything = function() { 
    var inputs = document.getElementsByClassName('inputCtrl'); //inputCtrl is the class you use to select those input s you want to validate 
    $scope.totalInputs = inputs.length; 
    $scope.invalidCount = 0; 
    for (var i = 0; i < inputs.length; i++){ 
    if(inputs[i].value.length < 100){ 
    $scope.invalidCount++; 
    } 
    } 
    //do your stuff here 
}

在線46類「classCtrl」一個讓所有的輸入，然後我去通過輸入列數組，以檢查它們的長度。

在那裏，你可以檢查其中是否實際上是無效的（按長度或任何其他限制）

來源

2016-11-28 00:57:58 lealceldeiro

謝謝，這非常有幫助！ – SpaceNinja

使用AngularJS驗證動態創建的「輸入」元素

回答

相關問題