Using AngularJS to validate dynamically created 'input' element

Question

I have a table that displays several entries, each has an <input>. The user can dynamically add additional inputs by clicking an "add entry" button. I need to iterate over them before saving and validate each one. I simplified my example to check that the value of each input is greater than 100 (ultimately I will use a pattern-match to validate MAC and IP addresses).

I can probably handle it if I could select all <input>s, but I would really like to select a specific <input> using an index I already have in my scope. I read that angular.element is a way, but I need to select something that was dynamically created, and thus not named something easy like id="myInput". Unless I use an id of "input" and append a unique number with Angular's $index in the id attribute?

Here is my Fiddle that shows what I'm doing. Line 44 is an if() that should check if any <input> is greater than 100. The "Save Row" button validates that the input is greater than 100, but if you edit a line, I need the "Save" button to validate any that the user has edited (by clicking Edit next to it).

tl;dr: How can I use Angular to select an <input> that has been created dynamically?

@Aruna well since each row has a few inputs that are just hidden until you click Edit, then yes I will have multiple inputs for editing. If you check out the Fiddle in the question, it will show exactly what is going on. Thank you for taking a look. — SpaceNinja
– SpaceNinja, Commented Nov 28, 2016 at 0:49
When I click edit button in one row, change the value, then click edit button on another row (without click 'save'), its updating the first row then the second row goes to edit mode. This is what you want or do you want to save first then edit next. Please advise? — Aruna
– Aruna, Commented Nov 28, 2016 at 0:52
Or do you want to click edit on multiple rows without updating another row and save everything once you edited all rows. I guess this is what you want. — Aruna
– Aruna, Commented Nov 28, 2016 at 0:57
Okay, I have updated the fiddle to make it more cleaner. Please check my answer below. — Aruna
– Aruna, Commented Nov 28, 2016 at 1:15

Aruna · Accepted Answer · 2016-11-28 01:21:54Z

I have updated your fiddle in a clean way so that you can maintain the validation in a generic method for both add & edit.

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

Updated fiddle:

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

Also, I have fixed the current issue with editing you have to allow multiple editing without save the first row when clicking the next edit on next row.

The validation of 'save everything' is now cleaner in angular way as below.

$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;
    }
  }

You can check the updated fiddle for the same,

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

Note: As you are using angular, you can validate the model as above and no need to retrieve and loop the input elements for the validation. Also for your case, validating the model is sufficient.

If you need some advanced validation, you should create a custom directive. Since, playing around with the elements inside the controller is not recommended in AngularJS.

lealceldeiro · Accepted Answer · 2016-11-28 00:57:58Z

You can use a custom class for those inputs you want to validate. Then you can select all those inputs with that class and validate them. See this Fiddle 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
}

On line 46 a get all the inputs with class "classCtrl" and then I go through the input s array in order to check their length.

There you can check if any of them is actually invalid (by length or any other restriction)

Collectives™ on Stack Overflow

Using AngularJS to validate dynamically created 'input' element

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related