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 selection. The following image portrays the problem. The first text input accepts only letters, the second one accepts only numbers. Both have ng-pattern and ng-required set. (The working example on Plunker)

What I would like to achieve is that when the radio button is selected, the validation turns off for the corresponding input field.

I had hoped that setting the ng-disabled to true would prevent the invalid state from being set for the form controls in question, but alas, that is not the case.

The only solution I have found so far is to clear the input whenever selecting another choice and setting the ng-required to false. Is there any sensible way of achieving this or is the only solution to take the elements out of DOM entirely?

Answer 1

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 2

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.