Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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"/> 
like image 477
Nisham Mahsin Avatar asked Jan 29 '14 12:01

Nisham Mahsin


People also ask

How do I turn off form control and keep value?

If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors. Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.


2 Answers

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.

like image 73
Abhishek Jain Avatar answered Sep 19 '22 08:09

Abhishek Jain


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 } 
like image 27
No Idea For Name Avatar answered Sep 18 '22 08:09

No Idea For Name