Validating repeating inputs inside an AngularJS form

Question

I know this has been asked before, and have even found a well-upvoted answer here:

How to validate inputs dynamically created using ng-repeat, ng-show (angular)

But I can't get that solution to work. I've got an example here - annoyingly both jsFiddle and Plunkr seem to be down right now.

Here's the JS:

app.controller('DetailsCtrl', ['$scope', function($scope) {
    $scope.loading = false;
    $scope.formData = {
        lines: [{
            text: 'test.com'}]
    };
    $scope.addRow = function() {
      $scope.formData.lines.push({text:null});

    };
}]);

Here's the markup:

<body ng-controller="DetailsCtrl">
  <div>
    <form name="mainForm" novalidate class="form-vertical">
...some non-repeating inputs go in here...
      <div data-ng-repeat="line in formData.lines" data-ng-form="lineForm">

          <input type="text" name="myinput" data-ng-model="line.text" data-ng-required="true">
          <span data-ng-show="mainForm.lineForm.myinput.$error.required">Error!</span>


      </div>

      <a href='#' data-ng-click="addRow()">New Line</a>
    </form>
  </div>


</body>

You'll notice initially there is one text input with text in - great. Click the 'New Line' link. Because the new text input fails validation - BOTH text inputs get the warning span shown... I just want the one span relating to the one empty text input to show up.

dubadub · Accepted Answer · 2014-06-12T12:21:21.097

1

As AngularJS relays on input names to expose validation errors, and you used the same name for all inputs, you faced with this effect.

So you can't generate input name dynamically, but instead you can use ng-form (see https://docs.angularjs.org/api/ng/directive/ngForm).

<form name="mainForm" novalidate class="form-vertical">...some non-repeating inputs go in here...
    <div data-ng-repeat="line in formData.lines" data-ng-form="lineForm">
        <input type="text" name="myinput" data-ng-model="line.text" data-ng-required="true"> 
        <span data-ng-show="lineForm.myinput.$error.required">Error!</span>    
    </div> <a href='#' data-ng-click="addRow()">New Line</a>

</form>

EDIT. Please note, access to error myinput.$error.required instead of lineForm.myinput.$error.required.

Please, checkout working fiddle http://jsfiddle.net/Y9g4q/7/.

edited Jun 12 '14 at 12:21

answered Jun 12 '14 at 12:03

dubadub

3,312
3
23
28

Sadly, jsFiddle still isn't working for me, so can't check... but did you notice I already have an inner ng-form - on the data-ng-repeat div I also have a data-ng-form directive. Also, I can't see any reference to your new innerForm in the data-ng-show expression, so are you sure this works? – Simon Green Jun 12 '14 at 12:11
Yes, you are right. Sorry, trying to figure out what's wrong. – dubadub Jun 12 '14 at 12:16
So, I updated fiddle and code in answer to working one. The point is in a way of accessing to error: instead of `mainForm.lineForm.myinput.$error.required` use `lineForm.myinput.$error.required` – dubadub Jun 12 '14 at 12:23
Hmm, I'm sure I tried dropping the parent form from the ng-show expression before, but just tried it again and it worked now - great, thanks! – Simon Green Jun 12 '14 at 16:37
Good luck with Angular! – dubadub Jun 12 '14 at 16:38

Validating repeating inputs inside an AngularJS form

1 Answers1