A stimulus controller for adding / removing Rails nested form dynamically
npm install @kanety/stimulus-nested-formA stimulus controller for adding / removing Rails nested form dynamically.
* @hotwired/stimulus 3.0+
Install from npm:
$ npm install @kanety/stimulus-nested-form --save
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 %>
<% end %>
<% end %>
New nested form will be added when the Add button is clicked.id
The last element of the nested forms is used as a template to be added.
The index written in and name attributes are incremented automatically as the following example:
`html`
The added form is handled as follows:
* The values of input and textarea elements are cleared.select
* The selected options of elements are cleared.
* The first element of radio buttons is selected.
#### associations
You can specify name of associations by associations option.assocsA
If the nested form consists of multiple associations such as and assocsB,
you can set the name of associations as the following example:
`html
data-nested-form-associations-value='["assocsA", "assocsB"]'>
You can also specify name of primary keys as follows:
html
data-nested-form-associations-value='["assocsA", "assocsB"]'
data-nested-form-primary-keys-value='["id", "id"]'>
#### max
If you want to disable
button when the number of nested forms reached to the limit,
max option is available:`javascript
data-nested-form-max-value="10">
#### start
If you want to change start index of nested form,
option is available:`javascript
data-nested-form-start-value="10">
#### increment
If you want to change the number of adding nested form at once,
option is available:`javascript
data-nested-form-increment-value="3">
#### 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'];
`$3
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
});
``The library is available as open source under the terms of the MIT License.