AngularJS: validate ng-disabled / ng-readonly fields

Question

I scribbled this jsFiddle to describe the problem at hand. Basically I have a form with certain ng-required text inputs. The catch is that the user cannot type inside them, but has to click on a button which opens up a dialog with a list of allowed values; clicking on one sets the input's ng-model accordingly (in my example, the button next to the input sets the ng-model right away, but you get the jist).
Trouble is that if I set ng-disabled (comprehensible) or ng-readonly (this honestly I can't figure out why) the form is submitted even if the field is left empty, whereas I'd like to enforce user input. How could I achieve this? Cheers.

you need write your own valid fro this case...

Daredzik
– Daredzik

2015-09-08 07:16:09 +00:00
Commented Sep 8, 2015 at 7:16 — Daredzik
– Daredzik, Commented Sep 8, 2015 at 7:16

joebobstevedave · Accepted Answer · 2016-02-04 05:10:10Z

2

I got around this by adding another input sharing the same model and putting it right below the visible one. You can't just do a hidden input however (either by setting type="hidden" or ng-hide and whatnot), as hiding it entirely won't let the validation show up.

<!-- Normal input: we want this to be required, yet read-only -->    
<input id="inputMyValue" ng-model="myValue" ng-click="openSelectionDialog()" ng-readonly="true"/>

<!-- Hidden input: not really hidden - just visible enough for the validation to work -->
<input id="inputMyValueHidden" ng-model="myValue" ng-required="true"  style="height: 0; border: 0;"/>

answered Feb 4, 2016 at 5:10

joebobstevedave

213 bronze badges

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

Comments

Tj Gienger · Accepted Answer · 2015-09-08 07:20:28Z

1

Write your own validation function on submit:

$scope.validateForm = function() {
    if ($scope.myDisabledInput === '') {
        return;
    }
};

I would alert the user somehow, but this should at least point you in the right direction.

answered Sep 8, 2015 at 7:20

Tj Gienger

1,4051 gold badge13 silver badges17 bronze badges

1 Comment

Andrea Aloi Over a year ago

I guess this is better than nothing, though I was hoping to leverage the ng-required attribute

Collectives™ on Stack Overflow

AngularJS: validate ng-disabled / ng-readonly fields

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related