https://github.com/bendrucker/angular-form-state
Smarter AngularJS forms for reacting to submission states
https://github.com/bendrucker/angular-form-state
Last synced: over 1 year ago
JSON representation
Smarter AngularJS forms for reacting to submission states
- Host: GitHub
- URL: https://github.com/bendrucker/angular-form-state
- Owner: bendrucker
- License: mit
- Created: 2014-06-18T13:50:11.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2020-06-30T21:01:30.000Z (about 6 years ago)
- Last Synced: 2025-04-10T08:13:56.139Z (over 1 year ago)
- Language: JavaScript
- Size: 51.8 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
angular-form-state [](https://travis-ci.org/bendrucker/angular-form-state)
==================
Smarter AngularJS forms for reacting to submission states
## Install
```bash
# npm
$ npm install angular-form-state
# bower
$ bower install angular-form-state
```
## Setup
```js
// node module exports the string 'bd.form-state' for convenience
angular.module('myApp', [
require('angular-form-state')
]);
// otherwise, include the code first then the module name
angular.module('myApp', [
'bd.form-state'
]);
```
## API
### `bdSubmit`
Replace your `ngSubmit` directives with `bdSubmit`.
```html
```
In addition to standard `ngSubmit` behavior, the expression passed to `bdSubmit` can return a promise.
A `submission` objection is attached to [`ngFormController`](https://docs.angularjs.org/api/ng/type/form.FormController) containing:
* **succeeded** *boolean*: `true` if the `bdSubmit` expression returns a value or fulfilled promise
* **failed** *boolean*: `true` if the expression returns a rejected promise
* **error** *object*: The `Error` from a rejected promise returned by the `bdSubmit` expression. Otherwise `null`.
* **pending** *boolean*: `true` if the expression returned a promise that is still pending (not resolved or rejected)
* **attempted** *boolean*: `true` if submission has been attempted at least once
* **attempts** *number*: The number of times that form submission has been attempted.
Form submission can be reattempted an unlimited number of times. If you wish to prevent users from resubmitting a form that was successfully sent, for example, you should implement that yourself. Submission state (`succeeded`, `failed`, `error`, `pending`) is reset on every new submission attempt and will always reflect the active/most recent submission.
When the `bdSubmit` expression returns a rejected promise, the error is passed to [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler) which by default logs the error using `console.error`.
```js
$scope.submit = function () {
// return a promise, probably from $http
};
```
```html
Submit
Submitting...
Form submitted {{myForm.submission.attempts}} times
```
### `submitButton`
`submitButton` can be combined with `bdSubmit` to create a simple text button that:
* Disables itself and changes its text to a customizable message while form submission is pending
* Re-enables itself and restores its text when form submission completes (succeeds or fails)
```html
Submit
```
The directive will automatically add `type="submit"` to the element.