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

Question

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.

Community · Accepted Answer · 2017-05-23 12:22:14Z

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?

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Mar 24, 2015 at 19:48

Fredy Treboux

3,3912 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StudioTime Over a year ago

Giving you the answer for the explanation - This is perfect, these guys seem to have thought of everything

reptilicus · Accepted Answer · 2015-03-24 19:45:40Z

1

could probably use ng-required

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

answered Mar 24, 2015 at 19:45

reptilicus

10.4k6 gold badges59 silver badges80 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related