How to disable ng-required validation for a larger form part

Question

I have a large form part, that shall be disabled in some scenarios. I am using a <fieldset> tag with ng-disabled attribute, to enable/disable the form part.

 <ng-form name="myForm">
    <fieldset ng-disabled="myModel.isFieldsetDisabled">
      <input id="myTextField" type="text" ng-required="true" ng-model="myModel.myAttribute">
      ... lots of other fields
    </fieldset>
  </ng-form>

The problem is: When I disable the <fieldset>, the ng-form is still invalid, because some of the input fields are empty (but ought to be required). I expected these validations to be turned off when disabled.

How to achieve a valid ng-form without fumbling with all ng-required attributes on all input fields in the disabled form.

see the plunker: https://plnkr.co/edit/2JpSFqBqwdfgTa2wO4Ei?p=preview

So you'd like the input ng-required attribute to be set to false when the fieldset is disabled right? — fbid
Only way I can think of is setting the ng-required attribute to use the reversed flag of your ng-disabled like so ng-required="!myModel.isFieldsetDisabled" — KieranDotCo
I would expect that angular skips validation for disabled fields..? — devqon
@fbid I have a quite a lot of input and select fields within the disabled fieldset. So a solution that needs adaptation to every field would not be the first choice. — girafi

MarcoS MarcoS · Accepted Answer · 2016-04-11T12:52:01

I would try with something like this:

ng-required="!myModel.isFieldsetDisabled"

i.e.: input is required if myModel.isFieldsetDisabled variable is false...

How to disable ng-required validation for a larger form part

1 Answers