AngularJS Dynamic Form Field Validation

by Prajeesh_PR

HTML

<div data-ng-app>
    <div data-ng-controller="MyController">
        <form id="my_form" name="my_form" action="/echo/jsonp/" method="get">
            <div data-ng-repeat="item in items">
              <div ng-class="{'has-error':form['f_\{\{item.id\}\}'].$invalid}">
                <ng-form name="form">
                    <label for="f_{{ item.id }}">{{ item.name }}:</label>
                    <input type="text" id="f_{{item.id}}" name="f_{{item.id}}" data-ng-model="item.value" ng-pattern="/^[a-zA-Z0-9._-]+$/" placeholder="integer"><br/><br/>
                </ng-form>
                <p ng-show="form['f_\{\{item.id\}\}'].$invalid">
                fdgdf
                </p>
              </div>
            </div>
            <input type="submit" />
        </form>
    </div>
</div>

CSS

.has-error input {
    border-color: red;
}

JavaScript

MyController.$inject = ["$scope"];

function MyController($scope) {
    $scope.items = [
        {'id': '1', 'name': 'Item 1', value: ''},
        {'id': '2', 'name': 'Item 2', value: '1234'}
    ];
}