Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kanety/stimulus-nested-form
https://github.com/kanety/stimulus-nested-form
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kanety/stimulus-nested-form
- Owner: kanety
- License: mit
- Created: 2021-09-30T12:56:11.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-06-27T07:29:46.000Z (7 months ago)
- Last Synced: 2024-09-14T21:19:37.822Z (4 months ago)
- Language: JavaScript
- Size: 70.3 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# stimulus-nested-form
A stimulus controller for adding / removing Rails nested form dynamically.
## Dependencies
* @hotwired/stimulus 3.0+
## Installation
Install from npm:
$ npm install @kanety/stimulus-nested-form --save
## Usage
Register controller:
```javascript
import { Application } from '@hotwired/stimulus';
import NestedFormController from '@kanety/stimulus-nested-form';
const application = Application.start();
application.register('nested-form', NestedFormController);
```
Build nested form using Rails `fields_for`:
```erb
<%= form_with do |f| %>
<%= f.fields_for :assocs do |assoc_form| %>
<%= assoc_form.text_field :text %>
Remove
<% end %>
Add
<% end %>
```
New nested form will be added when the `Add` button is clicked.
The last element of the nested forms is used as a template to be added.
The index written in `id` and `name` attributes are incremented automatically as the following example:
```html
Remove
Remove
Add
```
The added form is handled as follows:
* The values of `input` and `textarea` elements are cleared.
* The selected options of `select` elements are cleared.
* The first element of radio buttons is selected.
### Options
#### associations
You can specify name of associations by `associations` option.
If the nested form consists of multiple associations such as `assocsA` and `assocsB`,
you can set the name of associations as the following example:
```html
```
You can also specify name of primary keys as follows:
```html
```
#### max
If you want to disable `Add` button when the number of nested forms reached to the limit,
`max` option is available:
```javascript
```
#### start
If you want to change start index of nested form, `start` option is available:
```javascript
```
#### increment
If you want to change the number of adding nested form at once, `increment` option is available:
```javascript
```
#### tags and attributes
You can customize tags and attributes which contains index value of nested form:
```javascript
NestedFormController.tags = NestedFormController.tags.concat(['a']);
NestedFormController.attributes = NestedFormController.attributes.concat(['onclick']);
```
Default tags and attributes are:
```javascript
static tags = ['input', 'textarea', 'select', 'label'];
static attributes = ['id', 'name', 'for'];
```
### Callbacks
Following callbacks are available to manipulate nested form elements:
```javascript
let element = document.querySelector('[data-controller="nested-form"]')
element.addEventListener('nested-form:before-add', (e) => {
console.log(e.detail.form); // form to be added
e.preventDefault(); // you can cancel form addition by preventDefault
});
element.addEventListener('nested-form:after-add', (e) => {
console.log(e.detail.form); // added form
});
element.addEventListener('nested-form:before-remove', (e) => {
console.log(e.detail.form); // form to be remove
e.preventDefault(); // you can cancel form removal by preventDefault
});
element.addEventListener('nested-form:after-remove', (e) => {
console.log(e.detail.form); // removed form
});
```
## License
The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).