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

Question

我正在尝试验证自动生成的表单(通过AngularJS v1.3)，其输入名称的格式为:

form_name[field_name]

最基本的例子是:

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

如您所见，输入名称为 morgageCalculator[homeValue]。现在我想在其下面添加一条错误消息:

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

由于非常明显的语法原因，此表达式无效:

morgageCalculator.morgageCalculator[homeValue].$pristine

但是这个也不起作用:

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

那么，问题，是否有访问这些字段的合理方法？我不介意将验证转移到某些 Controller 功能，但我面临着无法访问字段对象的相同问题。

任何帮助/提示将不胜感激。

Answer 1

在评论部分@dfsq的帮助下，我找到了错误。与我的问题不同，我的代码缺少 data-ng-model。

如果输入未绑定(bind)到模型，验证根本不会触发......

正确的代码片段:

<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>