Support Multiple Different Templates (STI)

index.html

@@ -148,6 +148,40 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
             </div>
           </template>
 
+          <template data-nested-form-target="template" data-template-name="todo_with_deadline">
+            <div class="mt-4 nested-form-wrapper" data-new-record="true">
+              <label for="NEW_RECORD" class="block text-sm font-medium leading-5 text-gray-700">New todo</label>
+              <div class="mt-1 flex relative rounded-md shadow-sm space-x-4">
+                <input
+                  id="NEW_RECORD"
+                  name="user[todos_attributes][NEW_RECORD][description]"
+                  class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                  placeholder="Your todo"
+                />
+
+                <input
+                  id="NEW_RECORD"
+                  name="user[todos_attributes][NEW_RECORD][deadline_at]"
+                  class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                  type="date"
+                  placeholder="Your todo"
+                />
+
+
+                <button
+                  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"
+                  type="button"
+                  data-action="nested-form#remove"
+                  title="Remove todo"
+                >
+                  X
+                </button>
+
+                <input type="hidden" name="user[todos_attributes][NEW_RECORD][_destroy]" />
+              </div>
+            </div>
+          </template>
+
           <div class="mt-4 nested-form-wrapper" data-new-record="false">
             <label for="todo-1" class="block text-sm font-medium leading-5 text-gray-700">Your todo</label>
             <div class="mt-1 flex relative rounded-md shadow-sm">
@@ -182,6 +216,16 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
             Add todo
           </button>
 
+          <button
+            id="nested-form-button"
+            type="button"
+            data-template-name="todo_with_deadline"
+            data-action="nested-form#add"
+            class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow"
+          >
+            Add todo with deadline
+          </button>
+
           <button
             type="submit"
             class="mt-4 bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 border rounded shadow"

spec/index.test.ts

@@ -22,13 +22,19 @@ describe("#nestedForm", (): void => {
           </div>
         </template>
 
+        <template data-nested-form-target="template" data-template-name="todo_with_deadline">
+          <div class="nested-form-wrapper" data-new-record="true">
+            <label for="NEW_RECORD">New todo with deadline</label>
+          </div>
+        </template>
+
         <div>
           <label>Your todo</label>
         </div>
 
         <div data-nested-form-target="target"></div>
 
-        <button type="button" data-action="nested-form#add">Add todo</button>
+        <button type="button" data-action="nested-form#add" data-template-name="todo_with_deadline">Add todo</button>
       </form>
     `
   })
@@ -44,6 +50,17 @@ describe("#nestedForm", (): void => {
     expect(target.previousElementSibling.innerHTML).toContain("New todo")
   })
 
+  it("should create new todo with custom template", (): void => {
+    const target: HTMLElement = document.querySelector("[data-nested-form-target='target']")
+    const addButton: HTMLButtonElement = document.querySelector("[data-action='nested-form#add'][data-template-name='todo_with_deadline']")
+
+    expect(target.previousElementSibling.innerHTML).toContain("Your todo")
+
+    addButton.click()
+
+    expect(target.previousElementSibling.innerHTML).toContain("New todo with deadline")
+  })
+
   it("should dispatch events", (): void => {
     const controllerElement: HTMLButtonElement = document.querySelector("[data-controller='nested-form']")
     const addButton: HTMLButtonElement = document.querySelector("[data-action='nested-form#add']")

src/index.ts

@@ -3,6 +3,7 @@ import { Controller } from "@hotwired/stimulus"
 export default class RailsNestedForm extends Controller {
   targetTarget: HTMLElement
   templateTarget: HTMLElement
+  templateTargets: HTMLElement[]
   wrapperSelectorValue: string
 
   static targets = ["target", "template"]
@@ -16,7 +17,9 @@ export default class RailsNestedForm extends Controller {
   add(e: Event): void {
     e.preventDefault()
 
-    const content: string = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
+    const templateTarget = this.resolveTemplate(e.target as HTMLElement)
+
+    const content: string = templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
     this.targetTarget.insertAdjacentHTML("beforebegin", content)
 
     const event = new CustomEvent("rails-nested-form:add", { bubbles: true })
@@ -41,4 +44,14 @@ export default class RailsNestedForm extends Controller {
     const event = new CustomEvent("rails-nested-form:remove", { bubbles: true })
     this.element.dispatchEvent(event)
   }
+
+  private resolveTemplate(element: HTMLElement): string {
+    if (element.dataset.templateName) {
+      return this.templateTargets.find((templateTarget: HTMLEelement): boolean => (
+        templateTarget.dataset.templateName === element.dataset.templateName
+      ))
+    }
+
+    return this.templateTarget
+  }
 }