使用ngRepeat在Angular中進行分組驗證

Question

我有一個大表單，我已分成標簽。 每個選項卡包含多個不同的輸入字段，並對輸入進行驗證。 現在我只對每個輸入字段進行驗證，但我現在正在嘗試為每個選項卡添加驗證。 也就是說，我希望選項卡指示其輸入字段是否包含驗證錯誤。

表單使用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>

標簽數組：

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

每個標簽的HTML：

<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 />

'data-integer'和'data-float'是自定義驗證指令：

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

我的想法是，如果任何子輸入字段無效，則將'isValid'變量設置為false。 我不確定在哪里執行此函數或此函數的外觀如何。 我也非常歡迎有關改進的想法或其他方法。

Answer 1

您可以使用表單對驗證進行分組，因此在一個簡單的場景中，每個選項卡都有一個單獨的表單。 但是，我知道您希望有一個根表單來處理提交，但是將選項卡字段組合在一起，以便為驗證提供更細粒度的UI響應。

在這種情況下，您可以使用嵌套表單。 有關更多信息，請參閱此示例 。 您將擁有一個根form （當然命名），然后為其中的每個組聲明其他ng-form 。 請注意，您必須專門為嵌套表單使用ng-form指令，因為瀏覽器不允許您嵌套form標記; ng-form指令作為一個元素可以解決這個問題。

對您而言，這意味着您將保留您的父表格。 然后，您只需使用自己的ng-form指令將每個選項卡中的字段包裝起來，為每個選項卡指定每個選項卡的唯一名稱。 每個選項卡的有效性將反映在根表單（ createForm ）中，因此您仍然可以使用典型方法檢查表單是否有效，例如createForm.$invalid等。但是，您現在可以檢查嵌套表單的狀態，例如createForm.Tab1Form.$valid 。

這里唯一的問題是ng-form不會評估name屬性，它會使用文字值，因此您可能會tab.title像tab.title一樣動態生成該名稱的tab.title就像您可能想要做的那樣。 我通過在模板中給出一個文字名稱來解決這個問題。

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

這是插件 。

如果選項卡的嵌套表單無效，您會注意到選項卡標題為紅色（在字段1中鍵入值，您將看到驗證錯誤類消失）。 請注意，我沒有在演示中連接你的Bootstrap JavaScript行為，因為我很懶，但我相信我已經說明了這一點。