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

AngularJS form validatation of auto-generated form

本文关键字：表单 验证 AngularJS 自动生成      更新时间：2023-09-26

我正在尝试验证一个自动生成的表单（通过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

那么，问题，是否有任何合理的方法来访问这些字段？我不介意将验证转移到某个控制器函数，但我也面临着无法访问字段对象的同样问题。

如有任何帮助/提示，我们将不胜感激。

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

如果输入未绑定到模型，则验证根本不会启动

正确的代码段：

<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>
相关文章：