угловой проверка FormController

Question

У меня есть этот HTML форма:

<div class="modal-body"> 
     <form name="addAdminForm"> 
      <div class="form-group addPopupLabel"> 
       <div class="container-fluid-full" id="email3"> 
        <input placeholder="Email" type="text" ng-model="model.email" required /> 
       </div> 

       <div class="container-fluid-full"> 
        <input placeholder="Password (at last 6 characters)" type="password" ng-model="model.password1" id="pw1" name="pw1" required /> 
       </div> 

       <div class="container-fluid-full"> 
        <input placeholder="Confirm password" type="password" ng-model="model.password2" id="pw2" name="pw2" required password-compare="pw1" /> 
       </div> 
       <div class="container-fluid-full"> 
        <label>Admin</label> 
        <input type="radio" class="form-control" name="role" ng-model="model.role" ng-value="userRoles.admin"> 
       </div> 

       <div class="container-fluid-full"> 
        <label>CS</label> 
        <input type="radio" class="form-control" name="role" ng-model="model.role" ng-value="userRoles.cs"> 
       </div> 

       <div> 
        <span class="errormessage" style="color:red">{{errormessage}}</span> 
       </div> 
      </div> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" ng-disabled="addAdminForm.$invalid" ng-click="createForm.$invalid || ok()">Submit</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 

Проблема: Кнопка пребывание на отключении режима в то время как один из полей в фокусе. Как я могу решить эту проблему с помощью FormController?

Answer 1

addAdminForm имеет область действия в форме. Таким образом, одним из вариантов является перемещение кнопок в форме или перемещение элемента формы, чтобы он обертывал кнопки. Я бы предпочел это, поскольку он мертв просто и в большинстве случаев выполним.

Если по какой-либо причине это невозможно, вы можете сделать директиву для экспорта флага формы в переменную внешней области. Простая реализация будет:

app.directive('bindValidity', ['$parse', function($parse) { 
    return { 
     restrict: 'A', 
     scope: false, 
     controller: ['$scope', '$attrs', function($scope, $attrs) { 
      var assign = $parse($attrs.bindValidity).assign; 

      if (!angular.isFunction(assign)) { 
       throw new Error('the expression of bindValidity is not settable: ' + $attrs.bindValidity); 
      } 

      this.setFormController = function(formCtrl) { 
       if (!formCtrl) { 
        throw new Error('bindValidity requires one of <form> or ng-form'); 
       } 
       $scope.$watch(
        function() { 
         return formCtrl.$invalid; 
        }, 
        function (newval) { 
         assign($scope, newval); 
        } 
       ); 
      }; 
     }], 
     require: ['?form', '?ngForm', 'bindValidity'], 
     link: function (scope, elem, attrs, ctrls) { 
      var formCtrl, bindValidity; 
      formCtrl = ctrls[0] || ctrls[1]; 
      bindValidity = ctrls[2]; 
      bindValidity.setFormController(formCtrl); 
     } 
    }; 
}]); 

Используйте его как:

<div class="modal-body"> 
    <form name="addAdminForm" bind-validity="some.variable"> 
     ... 
    </form> 
    <div class="modal-footer"> 
     <button ... ng-disabled="some.variable" ng-click="some.variable || ok()">Submit</button>