Question

我有一个表单，其中至少有一个输入必须包含数据，因此我使用以下内容禁用提交，直到至少有一个输入包含数据：

<form novalidate>
  <input type="text" ng-model="caption.topCap" id="topCap" class="pull-left" required>
  <input type="text" ng-model="caption.bottomCap" id="bottomCap">
  <input type="submit" value="Caption It" class="btn btn-block btn-success btn-lg" ng-disabled="!(caption.topCap || caption.bottomCap)">
</form>

这是控制器：

capApp.controller('captionFormController', ['$scope', function($scope) {
  $scope.master = { topCap: "Top Line", bottomCap: "Bottom Line" };
  $scope.update = function(caption) {
    $scope.master = angular.copy(caption);
  };
  $scope.reset = function() {
    $scope.caption = angular.copy($scope.master);
  };
  $scope.reset();
}]);

问题是我不能在字段上使用required，因为只需要一个或另一个，因此我从来没有在输入中添加ng-invalid类，所以尽管两个字段都可能是空的，我有一个禁用的提交按钮，如果两个字段都是空的，我想要添加一个类。

有没有办法将类添加到字段中，如果它们已被触摸但是都是空的？它们预先填写页面加载。

Answer 1

可能会使用ng-required

input(ng-required="!caption.bottomCap, ng-model="caption.topCap")
input(ng-required="!caption.topCap, ng-model="caption.bottomCap")

Answer 2

ng-required允许您使用表达式来设置字段是否应标记为必需，您可以使字段在那里引用其他值。有关详细信息和非常好的工作示例，请参阅以下问题的回复：How can I conditionally require form inputs with AngularJS?

AngularJS表单验证 - 至少一个带值的输入 - 添加类

2 个答案: