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)

Screenshot of the problem in question

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?

That this wasn't implemented with first class support in AngularJS was a big oversight for real world form validation. — Jacob Stamm
– Jacob Stamm, Commented Apr 26, 2021 at 13:38

Community · Accepted Answer · 2017-05-23 10:32:58Z

7

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.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Feb 7, 2014 at 8:08

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

3 Comments

RJo Over a year ago

Yeah, the $addControl and $removeControl possibly could do the trick. I'll try to sketch up a plunk that would disable validation for all children. The problem here is that there might by a ng-form somewhere between the disable-children and the inputs to disable, as well as not picking up select elements.

Khanh TO Over a year ago

@RJo: yes, that's just a demo for your case and just to give the idea of $addControl and $removeControl. You could extend it. Happy coding.

Hassan Faghihi Over a year ago

@KhanhTO man can you help me in here: stackoverflow.com/q/32052991/1260751

R. Kazeno · Accepted Answer · 2015-09-09 06:24:06Z

4

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.

edited Sep 9, 2015 at 6:24

R. Kazeno

1131 gold badge2 silver badges5 bronze badges

answered Sep 8, 2015 at 19:26

DisasterMan

891 silver badge7 bronze badges

2 Comments

RJo Over a year ago

The ng-required is not the only validation for the fields, also patterns should be disabled. What I wanted was to turn off all validation for the field when not selected, not only required validation.

DisasterMan Over a year ago

Oh lordy - that complicates things. What I have done is use ng-if to remove fields from the DOM that aren't current so they don't get validated, but as said, that requires a checkbox which does complicate the form. It may not be ideal for your intended UX, but it works OK.

marmite · Accepted Answer · 2015-02-12 15:52:10Z

0

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.

answered Feb 12, 2015 at 15:52

marmite

5215 silver badges14 bronze badges

Collectives™ on Stack Overflow

Validation of invisible and disabled fields in AngularJS

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related