納克級的內部沒有指導工作表單驗證

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 ..類中添加元素時，元素無效。