How to use name="array[]" on forms in angularjs

Question

I have a structure like this

$scope.mydata = {
 'attribute': 'value',
 'otheratribute'  : 'othervalue',
 'thirdatribute' : {
      'name': 'xx',
      'desc': 'yy'
  }
}

and input to the thirdatribute like this

<form name="myForm">
  <div ng-class="{ 'has-error': myForm.thirdatribute.name.$invalid }">
    <span>My subdata</span>

    <input name="thirdatribute['name']" type="text" 
           ng-model="mydata.thirdatribute.name" required>

  </div>
</form>

the root atributes attribute and otheratribute validation work fine but the thirdatribute throw an error on console:

TypeError: Cannot read property '$invalid' of undefined

some idea that i can do?

Brad Barber · Accepted Answer · 2015-02-22 01:55:13Z

1

You can name that input "thirdatributename" instead of what you currently have. The input name is what's used in the form object and doesn't have to match the ng-model name.

<div class="form-group row" ng-class="{ 'has-error': myForm.thirdatributename.$invalid }">
  <span class="col-md-2 control-label text-left">My subdata</span>
  <div class="col-md-4">
    <input type="text" class="form-control "
      ng-model="mydata.thirdatribute.name"
      required
      name="thirdatributename"
      />
  </div>
</div>

http://plnkr.co/edit/qdeJM2GUYyjmXdcYSBQ7?p=preview

answered Feb 22, 2015 at 1:55

Brad Barber

2,9631 gold badge21 silver badges18 bronze badges

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

2 Comments

Tarsis Over a year ago

Thanks, it work for me! The 'name' attribute don´t need follow the same model structure, right?

Brad Barber Over a year ago

That's correct - the name attribute doesn't need to follow the model structure...it's just how you reference that model object's validation in the form.

iamiddy · Accepted Answer · 2015-02-22 02:06:28Z

1

I find these functions useful, you can name inputs anything, and use form.thosenames for 'ngModelContoller' to call these functions

$scope.getCssClasses = function(ngModelContoller) {
            return {
              error: ngModelContoller.$invalid && ngModelContoller.$dirty,
              success: ngModelContoller.$valid && ngModelContoller.$dirty
            };
          };

 $scope.showError = function(ngModelController, error) {
         return ngModelController.$error[error];
    };

and here in HTML

<div class="control-group" class="getCssClasses(form.email)">
      <span ng-show="showError(form.email, 'email')" >You must enter a valid email</span>
     </div>

edited Feb 22, 2015 at 2:06

answered Feb 22, 2015 at 1:46

iamiddy

3,1033 gold badges32 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to use name="array[]" on forms in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related