使用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>？

你想多次编辑？ – 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中的元素。

你摇滚！谢谢。我会用这些建议。 – 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”一个让所有的输入，然后我去通过输入列数组，以检查它们的长度。

在那里，你可以检查其中是否实际上是无效的（按长度或任何其他限制）

谢谢，这非常有帮助！ – SpaceNinja

使用AngularJS验证动态创建的“输入”元素

相关推荐