纳克级的内部没有指导工作表单验证

Question

我有一个表格和里面像这样的指令： addEditUser.html：

<form role="form" class="form-horizontal" novalidate name="addEditUserForm" > 
     <div class="form-group labelInputContainer"> 
      <label for="emailAddr" class="col-xs-1 col-sm-1 col-md-1 control-label">E-mail</label> 
      <div class="col-xs-8 col-sm-8 col-md-8"> 
       <input type="text" ng-class="{'invalid': addEditUserForm.emailAddr.$error.required}" maxlength="100" class="form-control" id="emailAddr" name="emailAddr" placeholder="E-mail" ng-model="user.emailAddr" required /> 
      </div> 
     </div> 
     <address default-addr="defaultAddr" /> 
     <button type="submit" class="btn greenButton" style="width: 100%;" ng-click="saveUser();" data-ng-disabled="addEditUserForm.$invalid">SAVE</button> 
    </form> 

addEditUserController.js

app.controller('addEditUserController', function ($scope, $routeParams, $location, $filter, reposSvc) { 
     $scope.defaultAddr = {}; 
     var id = $routeParams.id; 
     if (id) { 
      $scope.user = reposSvc.user.get({ id: id }, 
       function (data) { 
        $scope.defaultAddr = data.defaultAddr; 
       }); 
    }); 

指令HTML （address.html）：

<div> 
    <div class="form-group labelInputContainer"> 
     <label for="streetAddress" class="col-xs-2 col-sm-2 col-md-2 control-label">Street</label> 
     <div class="col-xs-3 col-sm-3 col-md-3"> 
      <input type="text" ng-class="{'invalid': addEditUserForm.streetAddress.$error.required}" maxlength="100" class="form-control noLimitsTextBox" id="streetAddress" name="streetAddress" ng-model="defaultAddr.streetAddress" placeholder="Street" required /> 
     </div> 
     <label for="no" class="col-xs-2 col-sm-2 col-md-2 control-label">No</label> 
     <div class="col-xs-3 col-sm-3 col-md-3"> 
      <input type="text" maxlength="6" class="form-control" id="no" name="no" placeholder="No" /> 
     </div> 
    </div> 
</div> 

address.js：

(function() { 
    'use strict'; 

    app.directive('address', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      templateUrl: 'app/directives/address.html', 
      scope: { 
       defaultAddr: '=' 
      }, 
      controller: function ($scope, reposSvc, toastr) { 

      } 
     }; 
    }); 
})(); 

该按钮被禁用，直到我填写所有必填字段（在此简短示例中为电子邮件和街道）。但只有电子邮件才会应用“无效”类（背景颜色）。所以主要是两个控件的验证工作，但ng-class只适用于主html中的电子邮件字段。 我在做什么错？我怎么能从ng-class得到应用于指令控制的“无效”类？

Answer 1

原因是因为您的指令是隔离范围的（它不会自动从父级继承），因此它不会将特殊的表单对象作为属性添加为属性名称的属性。因此，您需要将它作为双向绑定来传递，或者使用$parent.addEditUserForm来访问它，虽然（对可重用性的影响）看起来很糟糕，或者只是使用scope:true，但它可能无法达到您使用独立范围的目的。验证是可行的，因为你的ng模型是双向绑定属性ng-model="defaultAddr.streetAddress"，它仍然附着在formcontroller实例上。

所以，你可以这样做：

return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'app/directives/address.html', 
     scope: { 
      defaultAddr: '=', 
      form:'=' //<-- Add a binding 
     }, 
     controller: function ($scope, reposSvc, toastr) { 

     } 
    }; 

和

<input type="text" ng-class="{'invalid': form.streetAddress.$error.required}" maxlength="100" class="form-control noLimitsTextBox" id="streetAddress" name="streetAddress" ng-model="defaultAddr.streetAddress" placeholder="Street" required /> 

，并传递它作为：

<address default-addr="defaultAddr" form="addEditUserForm" /> 

注：我已经在2 - 所使用的名称为form这样它就不会与特定的表单名称紧密结合，并且更加可重用。

或者作为其他选项而不是设置类使用ng-class只使用ng-invalid,ng-invalid-required etc ..类中添加元素时，元素无效。