CODEWITHSUNDEEP
angularjs
StudioTime
StudioTime

Reputation: 23989

AngularJS form validation - at least one input with value - add class

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.

Upvotes: 0

Views: 1636

Answers (2)

Fredy Treboux
Fredy Treboux

Reputation: 3331

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?

Upvotes: 1

reptilicus
reptilicus

Reputation: 10397

could probably use ng-required

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

Upvotes: 1

Related Questions