时间戳

首页 > 解决方案 > AngularJS：动态地将 has-error 应用于输入字段

javascript - AngularJS：动态地将 has-error 应用于输入字段

问题描述

我有从 JSON 动态生成的 html，我想实现一些验证逻辑。

为了澄清，这里有一个例子：

<div  ng-switch on="field.type" ng-hide="{{ field.hide }}">
<div ng-switch-when="input" class= "col-md-6" ng-class="{'has-error': reqField(field.name, entity[field.name]) }">
    <input
        ng-model="entity[field.name]" id="{{field.name}}" class="form-control" 
        type="text" ng-style="setStyle(field.style)" ng-change="{{field.change}}" />
</div>
</div>

    {
    "title": "Json Title",
    "id": "j_id",
    "groupfields": [
        {
            "name": "jsonname",
            "title": "JSON Title",
            "type": "jsonselect",
            "namevalue": "jsonvalue",
            "combo": "jsondropdown",
            "change" : "jsonChanged()"
        },
        {
            "name": "jsonEmail",
            "title": "JSON Email Address",
            "type": "display"
        },
        {
            "name": "jsonPhone",
            "title": "JSON Phone Number",
            "type": "display"
        }
    ]
},  {
    "title": "Json Title",
    "id": "j_id",
    "groupfields": [
        {
            "name": "jsonname",
            "title": "JSON Title",
            "type": "jsonselect",
            "namevalue": "jsonvalue",
            "combo": "jsondropdown",
            "change" : "jsonChanged()"
        },
        {
            "name": "jsonEmail",
            "title": "JSON Email Address",
            "type": "display"
        },
        {
            "name": "jsonPhone",
            "title": "JSON Phone Number",
            "type": "display"
        }
    ]
},

if (entityName) {
    return false;
} else {
    return true;
}

因此，为了澄清起见，例如：ng-switch on 中的“field.type”是 JSON 中的“类型”——我们可以根据不同的 JSON 键/值来确定显示内容的 html div。

这意味着一个 html div 可能会用于生成数百个输入字段，因此这需要是动态的。

我想在必填字段为空时添加验证。目前，我已经尝试将ng-class="{has-error': }which 指向我的函数 reqField。然而，因为这个函数会被每个“type”的字段触发：jsonselect，这个函数正在检查该字段是否为空——这在速度和可用性方面确实是低效的（超级滞后）。

您在上面看到的 javascript 或多或少是该函数reqField()为检查字段是否为空而执行的逻辑（非常低效，因为我们要检查数百个）。

我想使用的是类似的东西，ng-required={{field.required}}并在 JSON 中创建一个新的键/值来确定我是否希望该字段成为必填字段（如下所示）：

 {
"title": "Json Title",
"id": "j_id",
"groupfields": [
    {
        "name": "jsonname",
        "title": "JSON Title",
        "type": "jsonselect",
        "namevalue": "jsonvalue",
        "combo": "jsondropdown",
        "change" : "jsonChanged()"
    },
    {
        "name": "jsonEmail",
        "title": "JSON Email Address",
        "type": "display",
        "required": true
    },
    {
        "name": "jsonPhone",
        "title": "JSON Phone Number",
        "type": "display",
        "required": true
    }
]
},

~ 并以某种方式将该信息传递给，ng-class="{has-error': }以便我们可以突出显示 - 或者一旦我们知道该字段已填写/或为空，就可以做任何我们想做的事情。

标签： javascriptjsonangularjsvalidation

解决方案

表单验证内置在 AngularJS 中。该ng-required指令将向表单对象添加错误状态，以便您可以ng-class像这样设置：

<div ng-switch-when="input" class= "col-md-6" ng-class="{'has-error': myForm[field.name].$error.required }">

您的表单和输入必须具有 name 属性才能正常工作：

<form name="myForm">
...
  <input name="{{field.name}}" ng-required="field.required">

推荐阅读