使用ngRepeat在Angular中进行分组验证

Question

I have a large form that I have splitted into tabs. Each tab contains multiple different input fields with validation on the inputs. Right now I only have validation per input field, but I'm now trying to add validation per tab. That is, I want the tabs to indicate if any of its input field contains validation errors.

The form is rendered using ngRepeat:

<form name="createForm" novalidate>
  <ul class="nav nav-tabs">
    <li ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
      <a ng-hide="tab.isValid" data-target="#tab{{$index + 1}}" data-toggle="tab" class="invalid">{{tab.title}}</a>
      <a ng-show="tab.isValid" data-target="#tab{{$index + 1}}" data-toggle="tab">{{tab.title}}</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
      <div ng-include="'/view/create/partials/' + tab.content"></div>
    </div>
  </div>
</form>

The array of tabs:

$scope.tabs = [
  { title: "Tab1", content: 'tab1.html', isValid: true },
  { title: "Tab2", content: "tab2.html", isValid: true },
  { title: "Tab3", content: "tab3.html", isValid: true }];

The HTML for each tab:

<label for="age">Age</label>
<input type="text" class="form-control" ng-model="person.tab1.Age" name="Age" maxlength="3" data-integer />

<label for="height">Height</label>
<input type="text" class="form-control" ng-model="person.tab1.Height" name="Height" data-float />

The 'data-integer' and 'data-float' are custom validation directives:

var INTEGER_REGEXP = /^\d*$/;
app.directive('integer', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (INTEGER_REGEXP.test(viewValue)) {
                    ctrl.$setValidity('integer', true);
                    return parseInt(viewValue);
                } else {
                    ctrl.$setValidity('integer', false);
                    return undefined;
                }
            });
        }
    };
});

My idea is to set the 'isValid' variable to false if any of its child input fields are invalid. I'm not sure where to execute this function or how this function would look like. I'm also very welcome for ideas on improvement or other ways to do this.

Answer 1

You group validation by using a form, so in a simple scenario each tab would have a separate form. However, I understand you want to have a root form for handling the submission, but group tab fields together to give a finer-grained UI response to validation.

In that case, you can use nested forms. See this example for more information . You'll have a root form (named, of course) and then declare additional ng-form for each group within it. Note that you must use the ng-form directive specifically for the nested forms because browsers won't let you nest form tags; ng-form directive as an element works around that.

For you, this means you'd keep your parent form as is. Then you just wrap the fields in each tab with their own ng-form directive, giving each a unique name representing each tab. The validity of each tab will be reflected in the root form ( createForm ) so you can still check if the form is valid overall using the typical approaches eg createForm.$invalid , etc. However, you can now check the state of the nested forms, too eg createForm.Tab1Form.$valid .

The only catch here is that ng-form does not evaluate the name attribute, it uses the literal value, so you'll have troubles generating that name dynamically from the tab.title like you probably want to do. I got around that by giving them a literal name in the template.

<form name="createForm" novalidate="">
  <ul class="nav nav-tabs">
    <li ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
      <a data-target="#tab{{$index + 1}}" data-toggle="tab" ng-class="{'invalid': createForm.{{tab.title}}.$invalid}">{{tab.title}}</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="tab in tabs" ng-class="{active: $index == 0}">

        <div ng-include="tab.content"></div>

    </div>
  </div>
</form>

Here's the plunk .

You'll notice that the tab titles are red if the tab's nested form is invalid (type a value into Field 1 and you'll see the validation error class go away). Note that I didn't wire up your Bootstrap JavaScript behaviors in the demo because I'm lazy, but I believe I've illustrated the point.