How do I validate child properties in angularjs?

Question

I have model that looks like this:

$scope.item = {
    userId: 2,
    bioValues: [{
      name: 'Systolic',
      biometricValue: 120
    }, {
      name: 'Diastolic',
      biometricValue: 80
    }]
  };

My form names are "bioValues[0].biometricValue, bioValues1.biometricValue".

But when I try and validate my form, 'ng-show' on my field validation errors isn't triggered. I have looked at the form object in firebug and all of my applicable form errors are correctly marked as invalid when empty but ng-show isn't triggered.

Here is a plunker. Try leaving one of the inputs empty. The required error is not triggered on ng-show.

Any ideas? Thanks.

Davin Tryon · Accepted Answer · 2013-12-23 18:36:02Z

4

There is no need to name the fields you are validating the exact name as the model that you are displaying.

Here is a working plunker.

The only change that I made was to name the fields in the template bioValues1 and bioValues2.

HTML:

<body ng-controller="MyCtrl">
  <form novalidate name="form">
    <div class="row">
      <input type="text" name="bioValues1" ng-model="item.bioValues[0].biometricValue" required />
      <span class="error" ng-show="form.bioValues1.$error.required">*Required</span>
    </div>
    <div class="row">
      <input type="text" name="bioValues2" ng-model="item.bioValues[1].biometricValue" required />
      <span class="error" ng-show="form.bioValues2.$error.required">*Required</span>
    </div>
  </form>
</body>

JS:

var myApp = angular.module("MyApp", []);

myApp.controller("MyCtrl", function($scope) {
  $scope.item = {
    userId: 2,
    bioValues: [{
      name: 'Systolic',
      biometricValue: 120
    }, {
      name: 'Diastolic',
      biometricValue: 80
    }]
  };

});

answered Dec 23, 2013 at 18:36

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trevorc Over a year ago

Sure enough. I was using indexing in a repeat loop for my naming. Now I see why that is not necessary. Thanks so much. Pulling my hair out on this one.

Collectives™ on Stack Overflow

How do I validate child properties in angularjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related