javascript - 表单级别的 Angularjs 指令，访问所有字段并检查验证

Question

在表单(itemSelectionForm)中，我使用 ng-repeat 渲染多个表。在每个表中，我都有单选按钮，其名称附加有索引。现在，我想编写一个 Angular JS 指令 (selectAtleastOneItemToReturn)，将其放在表单上(使用 select-atleast-one-item)，该指令将根据子表单选按钮进行表单验证。现在，我不知道如何访问这些子表单选按钮及其在该指令中的值，以便我可以编写验证代码。而且，如果单选按钮的值发生变化，我想一次又一次地进行验证。如果表单无效，则下一步按钮将被禁用。 HTML 如下。

<div class="panel-group" data-ng-form="itemSelectionForm" select-atleast-one-item>
  <div class="panel panel-default" data-ng-repeat="item in items">
    <div class="panel">
      <div class="panel-body">       
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>Action</th>
                <th>Item Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <label>
                  <input type="radio" name="inputRadios{{$index}}" value="option 1"  data-ng-model="item.action" required/>
                  </label>
                </td>
                <td>{{item.description}}</td>
              </tr>
              <tr>
                <td>
                  <label>
                  <input type="radio" name="inputRadios{{$index}}" value="option 2" data-ng-model="item.action" required/>
                  </label>
                </td>
                <td colspan="2">Option 2</td>
              </tr>
              <tr>
                <td>
                  <label>
                  <input type="radio" name="inputRadios{{$index}}" value="option 3" data-ng-model="item.action" required/>
                  </label>
                </td>
                <td colspan="2">Option 3</td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>
  </div>
</div>

<div class="right">    
  <button type="submit" class="btn green-button left space-left" data-ng-disabled="itemSelectionForm.$invalid" data-ng-click="goForward()">Next</button>
</div>

Answer 1

最简单的方法可能是将表单对象传递给指令，并在您需要的属性上放置一个 $watch ，在您的情况下可能是 $error - 虽然我不太清楚你实际上想要实现什么......

JS:

var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope, $log){
    $scope.items = [
        {
            action: 'fooAction',
            description: 'Foo'
        },
        {
            action: 'barAction',
            description: 'Bar'
        }
    ];
});    
app.directive('selectAtleastOneItem', function(){
    return {
        restrict: 'A',
        scope: {
            frm: '=selectAtleastOneItem'
        },
        link: function(scope, element, attrs){
            scope.$watch('frm.$error', function(newVal, oldVal){
                console.log(newVal);
            }, true);
        }
    }
});

HTML:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div ng-form="itemSelectionForm" select-atleast-one-item="itemSelectionForm">
            <div ng-repeat="item in items">
                {{item.description}}
                <input type="radio" name="inputRadios{{$index}}" ng-model="item.action" required>
            </div>
    </div>
</div>

fiddle :http://jsfiddle.net/dwkmy20j/1/

希望这能让你有所进步。