Skip to content

Commit 1135860

Browse files
NikitaNaumenkoNikitaNaumenko
committed
Add support many nested forms
1 parent aff36ae commit 1135860

File tree

2 files changed

+138
-1
lines changed

2 files changed

+138
-1
lines changed

‎index.html

+135
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,141 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
202202
</section>
203203
</div>
204204

205+
<div class="relative h-full max-w-5xl mx-auto px-4">
206+
<section class="mt-16">
207+
<form data-controller="nested-form">
208+
<template data-nested-form-target="template" data-model-template="todo">
209+
<div class="mt-4 nested-form-wrapper" data-new-record="true">
210+
<label for="NEW_RECORD" class="block text-sm font-medium leading-5 text-gray-700">New todo</label>
211+
<div class="mt-1 flex relative rounded-md shadow-sm">
212+
<input
213+
id="NEW_RECORD"
214+
name="user[todos_attributes][NEW_RECORD][description]"
215+
class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
216+
placeholder="Your todo"
217+
/>
218+
219+
<button
220+
class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
221+
type="button"
222+
data-action="nested-form#remove"
223+
title="Remove todo"
224+
>
225+
X
226+
</button>
227+
228+
<input type="hidden" name="user[todos_attributes][NEW_RECORD][_destroy]" />
229+
</div>
230+
</div>
231+
</template>
232+
233+
<template data-nested-form-target="template" data-model-template="note">
234+
<div class="mt-4 nested-form-wrapper" data-new-record="true">
235+
<label for="NEW_RECORD" class="block text-sm font-medium leading-5 text-gray-700">New note</label>
236+
<div class="mt-1 flex relative rounded-md shadow-sm">
237+
<input
238+
id="NEW_RECORD"
239+
type="text"
240+
name="user[note_attributes][NEW_RECORD][description]"
241+
class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
242+
placeholder="Your note"
243+
/>
244+
245+
<button
246+
class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
247+
type="button"
248+
data-action="nested-form#remove"
249+
title="Remove note"
250+
>
251+
X
252+
</button>
253+
254+
<input type="hidden" name="user[note_attributes][NEW_RECORD][_destroy]" />
255+
</div>
256+
</div>
257+
</template>
258+
259+
<div class="mt-4 nested-form-wrapper" data-new-record="false">
260+
<label for="todo-1" class="block text-sm font-medium leading-5 text-gray-700">Your todo</label>
261+
<div class="mt-1 flex relative rounded-md shadow-sm">
262+
<input
263+
id="todo-1"
264+
name="user[todos_attributes][0][description]"
265+
class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
266+
value="Pet the cat"
267+
/>
268+
269+
<button
270+
class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
271+
type="button"
272+
data-action="nested-form#remove"
273+
title="Remove todo"
274+
>
275+
X
276+
</button>
277+
278+
<input type="hidden" name="user[todos_attributes][0][_destroy]" />
279+
</div>
280+
</div>
281+
282+
<div id="nested-form-target-todo" data-nested-form-target="target" data-model-target="todo"></div>
283+
284+
<button
285+
id="nested-form-button-todo"
286+
type="button"
287+
data-action="nested-form#add"
288+
data-model="todo"
289+
class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow nested-form-action"
290+
>
291+
Add todo
292+
</button>
293+
294+
<div class="mt-4 nested-form-wrapper" data-new-record="false">
295+
<label for="todo-1" class="block text-sm font-medium leading-5 text-gray-700">Your note</label>
296+
<div class="mt-1 flex relative rounded-md shadow-sm">
297+
<input
298+
id="note-1"
299+
type="text"
300+
name="user[notes_attributes][0][description]"
301+
class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
302+
value="Buy fancy food for cat"
303+
/>
304+
305+
<button
306+
class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
307+
type="button"
308+
data-action="nested-form#remove"
309+
title="Remove note"
310+
>
311+
X
312+
</button>
313+
314+
<input type="hidden" name="user[notes_attributes][0][_destroy]" />
315+
</div>
316+
</div>
317+
318+
<div id="nested-form-target-note" data-nested-form-target="target" data-model-target="note"></div>
319+
320+
<button
321+
id="nested-form-button-note"
322+
type="button"
323+
data-action="nested-form#add"
324+
data-model="note"
325+
class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow nested-form-action"
326+
>
327+
Add note
328+
</button>
329+
330+
<button
331+
type="submit"
332+
class="mt-4 bg-indigo-600 hover:bg-indigo-400 text-white font-semibold py-2 px-4 border rounded shadow"
333+
>
334+
Save
335+
</button>
336+
</form>
337+
</section>
338+
</div>
339+
205340
<!-- This example requires Tailwind CSS v2.0+ -->
206341
<footer class="bg-white">
207342
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">

‎src/index.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ export default class extends Controller {
88

99
static targets = ['target', 'template']
1010
static values = {
11-
wrapperSelector: String
11+
wrapperSelector: String,
12+
actionSelector: String
1213
}
1314

1415
initialize (): void {
1516
this.wrapperSelector = this.wrapperSelectorValue || '.nested-form-wrapper'
17+
this.actionSelector = this.actionSelectorValue || '.nested-form-action'
1618
}
1719

1820
add (e: Event) {

0 commit comments

Comments
 (0)