On submit, AngularJS sets $submitted on the FormController and adds the class ng-submitted to the form. That's nice, and I could add

ng-disabled="myForm.$submitted || myForm.$invalid || maybeAnotherCondition"

to the submit button, and disable all inputs (as there's no point in re-submitting or editing anything before the call returns). The inputs should probably be re-enabled as soon as the call returns and the submit button on the first following input change...

Quite a lot of things to do and before I start with it, I'd like to know, if there's already some pattern or even a directive doing all this stuff? I could imagine having something like

FormService.manage(form, onSubmit, onSuccess, onFailure)

where each of the three functions would do just the specific job and nothing of the above boilerplate.

On submit, AngularJS sets $submitted on the FormController and adds the class ng-submitted to the form. That's nice, and I could add

ng-disabled="myForm.$submitted || myForm.$invalid || maybeAnotherCondition"

to the submit button, and disable all inputs (as there's no point in re-submitting or editing anything before the call returns). The inputs should probably be re-enabled as soon as the call returns and the submit button on the first following input change...

Quite a lot of things to do and before I start with it, I'd like to know, if there's already some pattern or even a directive doing all this stuff? I could imagine having something like

FormService.manage(form, onSubmit, onSuccess, onFailure)

where each of the three functions would do just the specific job and nothing of the above boilerplate.

• javascript
• html
• angularjs
• forms

• Were you able to disable a single input field and now want to disable all the input fields? – Shashank Agrawal Commented May 28, 2016 at 3:31
• @ShashankAgrawal I did nothing yet as I'm looking for a simple solution to be applied to all my forms. I don't want to pollute all inputs with ng-disabled. Using the fieldset is helpful, but I'm looking for more. – maaartinus Commented May 28, 2016 at 15:19
• 1 Alternatively, you can write a directive that will do things for you like I did in one of my directive github./sagrawal14/bootstrap-angular-validation/blob/master/… to apply global Bootstrap validation like jQuery in my many forms without writing anything extra. – Shashank Agrawal Commented May 29, 2016 at 5:17

1 Answer 1

If you want to disable all the input fields at once, I would suggest you use <fieldset>.

<form name="myForm" id="myForm" ng-submit="someHandler()">
    <fieldset form="myForm" ng-disabled="myForm.$submitted || myForm.$invalid || maybeAnotherCondition">
        <label>First Name</label>
        <input type="text" name="firstName" data-ng-model="firstName" />

        <label>Last Name</label>
        <input type="text" name="lastName" data-ng-model="lastName" />

        <button type="submit">Submit</button>
    </fieldset>
</form>

Disabling the fieldset element will disable all it's child input elements. See a working example below:

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  $scope.submitHandler = function() {
    alert("Form submitted");
  }
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.3.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div ng-app="sa" ng-controller="FooController" class="container">
  <form name="myForm" id="myForm" ng-submit="submitHandler()">
    <fieldset form="myForm" ng-disabled="myForm.$submitted">
      <div class="form-group">
        <label>First Name</label>
        <input type="text" name="firstName" data-ng-model="firstName" class="form-control" />
      </div>

      <div class="form-group">
        <label>Last Name</label>
        <input type="text" name="lastName" data-ng-model="lastName" class="form-control" />
      </div>

      <button type="submit" class="btn btn-primary">
        {{myForm.$submitted ? 'Submitted' : 'Submit'}}
      </button>
    </fieldset>
  </form>
</div>