AngularJS form validation (using $invalid with ng-reapeat and Bootstrap)

Question

I am trying to validate my AngularJS form, adding has-error class to form-group like:

<div class="form-group" ng-class="{ 'has-error': form.field.$invalid }">
    <input type="number" name="field" min="0" max="10" class="form-control">
</div>

And it works!

But it gets complicated when I'm using ng-repeat for fields and my name attribute is set according to key:

<div class="form-group" ng-class="{ 'has-error': form.???.$invalid }" ng-repeat="field in fields">
    <input type="number" name="{{ field.key }}" min="0" max="10" class="form-control">
</div>

So what should I enter where ??? is? Tried form.{{ field.key }}.$invalid, form[{{ field.key }}].$invalid, nothing works...

Strange thing if I know the value of field.key for example, and I set form.keyValue.$invalid - it still doesn't work.

Any suggestions?

Answer 1

You need to create an inner form (see ng-form). And take a look at this post