0

I have a form where at least one input must contain data, so I'm using the following to disable the submit until at least one input has data:

<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>

This is the controller:

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();
}]);

The problem is that I cannot use required on the fields because only one or the other is required, therefore I never get a class of ng-invalid added to the input, so although both fields might be empty, and I have a disabled submit button, I want to have a class added if both fields are empty.

Is there a way to have a class added to the fields, if they have been touched but are both empty? They are prefilled on page load by the way.

StudioTime
  • 22,603
  • 38
  • 120
  • 207

2 Answers2

1

could probably use ng-required

input(ng-required="!caption.bottomCap, ng-model="caption.topCap")
input(ng-required="!caption.topCap, ng-model="caption.bottomCap")
reptilicus
  • 10,290
  • 6
  • 55
  • 79
1

ng-required allows you to use an expression to set if the field should be marked as required or not, you could make the fields reference each other values there. For details and a very nice working example see the response for the following question: How can I conditionally require form inputs with AngularJS?

Community
  • 1
  • 1
Fredy Treboux
  • 3,167
  • 2
  • 26
  • 32