AngularJS: Dynamically apply has-error to input fields

Question

I have html that is dynamically generated from JSON and I would like to implement some validation logic.

To clarify, here is an example:

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

---

So for clarification, ex: 'field.type' in the ng-switch on is the "type" in the JSON - and we can determine which html div to display the content based on different JSON keys/values.

This implies that one html div could potentially be used to generate hundreds of input fields so this needs to be dynamic.

I would like to add validation for when a required field is empty. At the moment, I've tried adding the ng-class="{has-error': } which points to my function reqField. However, because this function is getting fired for EVERY field with "type": jsonselect, this function is checking whether or not the field is empty - which is really inefficient in terms of speed and usability (super laggy).

The javascript you see above is more or less the logic that the function reqField() does in order to check whether or not the field is empty (very inefficient since we're checking hundreds).

What I would like to use is something along the lines of ng-required={{field.required}} and make a new key/value in the JSON to determine whether or not I want this field to be a required field (sort like this):

 {
"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
    }
]
},

~ and somehow pass that information to the ng-class="{has-error': } so that we can highlight - or do whatever we want once we know the field has been filled in/or is empty.

Answer 1

Form validation is built in to AngularJS. The ng-required directive will add error state to the form object, so that you can set up your ng-class like so:

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

Your form and input must have name attributes for this to work:

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