角度自定义表单验证

Question

我试图关注一些教程，但无法弄清楚要做什么。

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

<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相关帖子，该帖子对使用表单验证有很好的答案。