如何使用AngularJS $提交？

Question

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.

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.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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>