Validation of invisible and disabled fields in AngularJS

Question

Is there any way to do conditional validation in AngularJS? The problem I am trying to solve is basically a list of radio buttons that enable/disable inputs based on the sel

Answer 1

I think that you are using ng-required incorrectly. You have hardcoded it to true for both text inputs but actually ng-required on those inputs should only be set true if the radio button is ticked.

Answer 2

Try this directive:

.directive('disableChildren', function() {
  return {
    require: '^form',
    restrict: 'A',
    link: function(scope, element, attrs,form) {
      var control;

      scope.$watch(function() {
        return scope.$eval(attrs.disableChildren);
      }, function(value) {
        if (!control) {
          control = form[element.find("input").attr("name")];
        }
        if (value === false) {
          form.$addControl(control);
          angular.forEach(control.$error, function(validity, validationToken) {
            form.$setValidity(validationToken, !validity, control);
          });
        } else {
          form.$removeControl(control);
        }
      });
    }
  }
})

DEMO

For more information and explanation of how it works. Check out my similar directive for excluding hidden elements from validation:

implementing a directive to exclude a hidden input element from validation ($addControl issue)

I think we could somehow combine these directives to create a general directive that could be used everywhere depending on how we evaluate an expression.

Answer 3

As marmite suggests, ng-required can accept an expression so you can say something like

<input name="numeric" ng-required="alpha.disabled == false" />
<input name="alpha" ng-required="numeric.disabled == false" />

I'm not sure on how to check the disabled state - that ought to do it, but I've only ever created this effect by checking the state of a checkbox.

I realise this is a Lazarus post, but hopefully it will help others.