AngularJS:how to disable all the form controls in a form?

Question

I want to disable all the form components so that it can't be edited when view button is clicked. this is my form

<form action="#" class="form-horizontal" >
   <div class="form-group">
      <label for="fieldname" class="col-md-3 control-label">Name</label>
      <div class="col-md-6">
         <input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
      </div>
   </div>
   <div class="form-group">
      <label for="fieldhname" class="col-md-3 control-label">House name</label>
      <div class="col-md-6">
         <input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />
      </div>
   </div>
   <div class="form-group">
      <label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
      <div class="col-md-6">
         <input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
      </div>
   </div>
   <div class="col-md-3"></div>

</form>

and this is my button

<input type="button" class="finish btn-success btn" ng-click="view(newItem)" value="view"/>

[Duplicate?](http://stackoverflow.com/questions/21638079/angularjs-disabling-all-form-controls-between-submit-and-server-response) This question came first, but the other question produced more discussion. Both discussions agree that a `
` is the answer (both have that same answer **twice**!) Moreover, both discussions acknowledge not all browsers support disabled fieldset; IE may not work. — The Red Pea, May 16 '17 at 03:18

score 23 · Accepted Answer · answered Jan 29 '14 at 12:10

23

Rather than handling it at per-field level, you can put all form elements into fieldset and use ng-disabled to disable the whole fieldset.

answered Jan 29 '14 at 12:10

Abhishek Jain

2,867
20
33

7

This doesn't work in IE at all. It actually disables validation on elements. – im1dermike Aug 06 '15 at 20:56

score 17 · Answer 2 · answered Jan 15 '15 at 12:48

17

you can use fieldset tag by surrounding your buttons with a fieldset and using ng-disabled attribute:

<form action="#" class="form-horizontal" >
   <fieldset ng-disabled="isClicked">
      <!--your form here --!>
   </fieldset>
</form>

now all that left is in the view(newItem) function do:

$scope.view = function(newItem){
   $scope.isClicked = true;
   // Your code here and set it to false when your are done with it
}

answered Jan 15 '15 at 12:48

No Idea For Name

10,935
10
37
61

2

fieldset is not supported in ie 9 if that matters – johnny 5 Jul 13 '15 at 18:49

score 4 · Answer 3 · answered Jan 29 '14 at 12:07

4

You could use an overlay and have a ng-show on it or you could add to each input ng-disabled

answered Jan 29 '14 at 12:07

TestersGonnaTest

1,006
2
9
21

score 4 · Answer 4 · answered Jan 29 '14 at 12:09

4

Set a scope variable when the view button is clicked.
Use ng-disabled in combination with the scope variable to disable the fields.

answered Jan 29 '14 at 12:09

RaviH

3,396
2
13
14

AngularJS:how to disable all the form controls in a form?

4 Answers4