Angular form is invalid when a required input is disabled

Question

I have a form input like so

<form name="groupForm" ng-submit="save()" ng-model="selectedItem"  novalidate>
<input 
    required 
    ng-disabled="true" 
    name="searchParameter" 
    type="text" 
    ng-model="criteria.SearchParameter" />

    <a href=""ng-click="save()" ng-class="{groupForm.$invalid}">Save All Changes</a>

When the value for the input is null or empty the form is invalid stating that this particular input is required. Is this expected or is there something I need to do?

You have required on the input? Therefore it is. Am I missing something? — StudioTime
– StudioTime, Commented Mar 26, 2015 at 13:53
But if it is required and disabled I would assume it is not then required? — Chris
– Chris, Commented Mar 26, 2015 at 13:53
No, required and disabled means it is required, but the user can't enter it. — steveo
– steveo, Commented Mar 26, 2015 at 13:54
I don't think they're exclusively linked tbh - I see what you mean but don't think it works like that — StudioTime
– StudioTime, Commented Mar 26, 2015 at 13:54
have a look at ng-required - you might be able to check if it's disabled which will let you decide whether it's required — StudioTime
– StudioTime, Commented Mar 26, 2015 at 13:55

eladcon · Accepted Answer · 2015-03-26 13:57:10Z

2

You can use ng-required, and set a condition there:

<input 
     ng-required ="false"
     ng-disabled="true" 
     name="searchParameter" 
     type="text" 
     ng-model="criteria.SearchParameter" />

Check this fiddle.

answered Mar 26, 2015 at 13:57

eladcon

5,8251 gold badge18 silver badges19 bronze badges

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

Comments

David says Reinstate Monica · Accepted Answer · 2015-03-26 13:57:07Z

0

You have the tag required in your input tag. That makes it required. In addition, you have ng-disabled="true" which means that you will never be able to fill in the input.

It seems like you have a misunderstand of what disabled does. Disabled just means you cant place input into it, not that it doesn't affect the form.

You are actually misusing disabled in 2 ways:

Disabled and required together doesn't make sense (hence your problem)
Specifically using the ng-disabled="true" also makes no sense. The advantage of ng-disabled is that it can be easily programaticly changed. Right now you are just hard-coding it. Might as well just use vanilla disabled

If you want the input to be required only when its enabled, and not required when its disabled, you can bind the two attributed to the same model:

<input 
    ng-required="foo"
    ng-disabled="foo" 
    name="searchParameter" 
    type="text" 
    ng-model="criteria.SearchParameter" />

edited Mar 26, 2015 at 13:57

answered Mar 26, 2015 at 13:53

David says Reinstate Monica

20.2k22 gold badges84 silver badges124 bronze badges

4 Comments

Chris Over a year ago

How do I make it required only when it is enabled then?

Chris Over a year ago

I have a condition in there, but for the sakes of making the example simple, and removing doubt from the equation, I set it to false

Chris Over a year ago

This seems really counter-intuitive to me. Thanks though

David says Reinstate Monica Over a year ago

@Chris You can use ng-required and bind it to the same model as ng-disabled. Ill update my answer with an example.

Collectives™ on Stack Overflow

Angular form is invalid when a required input is disabled

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related