自动生成的表单的AngularJS表单验证

Question

I am trying to validate an auto-generated form (via AngularJS v1.3 ) which inputs' names are in format:

form_name[field_name]

The very basic example would be:

<form name="morgageCalculator">
        <input type="text" class="form-control" 
            name="morgageCalculator[homeValue]" value="0"
            data-ng-model="data.homeValue" required="required"/>
</form>

As you can see, the input name is morgageCalculator[homeValue] . Now I would like to add an error message below it:

<div class="error"
     data-ng-show="!morgageCalculator.morgageCalculator[homeValue].$pristine && morgageCalculator.morgageCalculator[homeValue].$invalid">
    Please enter a number
</div>

For very obvious syntax reasons this expression is not valid:

morgageCalculator.morgageCalculator[homeValue].$pristine

But this one also does not work:

morgageCalculator["morgageCalculator[homeValue]"].$pristine

So, the question , is there any sane way of accessing those fields? I wouldn't mind moving the validation to some controller function, but I was faced with same issue of inability to access field object.

Any help/hint would be greatly appreciated.

Answer 1

With help of @dfsq from comment section, I was able to find the error. Unlike my SO question, my code was missing data-ng-model .

Validation will not fire at all if input was not bound to model....

The correct snippet:

<form name="morgageCalculator">
    <input type="text" class="form-control" 
        name="morgageCalculator[homeValue]" value="0"
        data-ng-model="data.homeValue" required="required"/>


    <div class="error"
        data-ng-show="!morgageCalculator['morgageCalculator[homeValue]'].$pristine && morgageCalculator['morgageCalculator[homeValue]'].$invalid">
            Please enter a number
    </div>
</form>