角度自定义表单验证

Question

我试图按照一些教程，但无法弄清楚该怎么做。

我想添加验证，至少有一个复选框（消费者/供应商）必须是真实的。如果不是true，则在两个字段显示错误消息）。最简单的方法是什么？

<form role="form" name="addClientForm" ng-submit="submitForm(addClientForm.$valid)" novalidate> 
     <div class="form-group" ng-class="{ 'has-error' : addClientForm.title.$invalid && !addClientForm.title.$pristine }"> 
      <label>Title</label> 
      <input type="text" class="form-control" placeholder="Enter a title" ng-model="client.title" required> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error' : addClientForm.company.$invalid && !addClientForm.company.$pristine }"> 
      <label>Company</label> 
      <input type="text" class="form-control" placeholder="Enter a company" ng-model="client.company" required> 
     </div> 
     <div class="checkbox"> 
      <label class="i-checks"> 
      <input type="checkbox" ng-model="client.consumer"><i></i> Consumer 
      </label> 
     </div> 
     <div class="checkbox"> 
      <label class="i-checks"> 
      <input type="checkbox" ng-model="client.vendor"><i></i> Vendor 
      </label> 
     </div> 
    </form> 

控制器（模态控制器）

angular.module('App') 
    .controller('ModalAddClientCtrl', function ($scope, $modalInstance) { 

    $scope.client = { title: '', company: '', consumer: true, vendor: false }; 

    $scope.submitForm = function(isValid) { 

    }; 

    $scope.ok = function() { 

     $modalInstance.close($scope.client); 

    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
    }); 

Answer 1

喜欢你正在试图你必须设置名称属性的输入字段中使用的角形式的验证。因此，如果您只有<form name='form'>和<input name='input'>，那么您可以使用form.input.$dirty或form.input.$pristine。将其与ng-if相结合，就像你有其他很简单。

例如看到这个fiddle并尝试编辑值。我已在您的表单中实施验证。我遗漏了控制器，条件和错误信息可能会更简单，但您会明白。

请参阅this相关文章，在使用表单验证方面有出色的答案。