Support for nested numeric input names

Author: pascalbaljet

app/app/Http/Controllers/FormComponentsController.php

@@ -35,6 +35,11 @@ public function defaultPhp()
         return view('form.components.defaultPhp');
     }
 
+    public function arrays()
+    {
+        return view('form.components.arrays');
+    }
+
     public function defaults()
     {
         Select::defaultChoices();

app/resources/views/form/components/arrays.blade.php

@@ -0,0 +1,40 @@
+@extends('layout')
+
+@section('content')
+
+FormComponents
+
+<div class="max-w-sm mx-auto px-4">
+    <x-splade-form
+        class="space-y-4"
+        :default="[
+            'options' => [],
+            'nested' => ['key' => 'value', 'another' => 'key'],
+            'list' => [1 => 'one', 2 => 'two', 3 => 'three'],
+            'another' => [1 => 'one', 2 => 'two', 3 => 'three']
+        ]"
+    >
+        <x-splade-group name="options" inline>
+            <x-splade-checkbox name="options[]" value="1" label="Option 1" />
+            <x-splade-checkbox name="options[]" value="2" label="Option 2" />
+            <x-splade-checkbox name="options[]" value="3" label="Option 3" />
+        </x-splade-group>
+
+        <x-splade-input name="nested.key" />
+        <x-splade-input name="nested[another]" />
+
+        <x-splade-input name="list[1]" />
+        <x-splade-input name="list[2]" />
+        <x-splade-input name="list[3]" />
+
+        <x-splade-input name="another.1" />
+        <x-splade-input name="another.2" />
+        <x-splade-input name="another.3" />
+
+        <x-splade-submit />
+
+        <div id="all">@{{ form.$all }}</div>
+    </x-splade-form>
+</div>
+
+@endsection

app/routes/web.php

@@ -81,6 +81,7 @@
     Route::get('form/components/defaults', [FormComponentsController::class, 'defaults'])->name('form.components.defaults');
     Route::get('form/components/defaultJson', [FormComponentsController::class, 'defaultJson'])->name('form.components.defaultJson');
     Route::get('form/components/defaultPhp', [FormComponentsController::class, 'defaultPhp'])->name('form.components.defaultPhp');
+    Route::get('form/components/arrays', [FormComponentsController::class, 'arrays'])->name('form.components.arrays');
     Route::get('form/components/eloquent', [FormComponentsController::class, 'eloquent'])->name('form.components.eloquent');
     Route::get('form/components/fluent', [FormComponentsController::class, 'fluent'])->name('form.components.fluent');
     Route::get('form/components/unguarded', [FormComponentsController::class, 'unguarded'])->name('form.components.unguarded');

src/Components/Form/InteractsWithFormElement.php

@@ -27,7 +27,19 @@ public static function dottedName(string $name): string
 
     public function formKey(): string
     {
-        return static::dottedName($this->name);
+        return collect(explode('.', static::dottedName($this->name)))
+            ->map(function (string $segment, int $index) {
+                if ($index === 0) {
+                    return $segment;
+                }
+
+                if (is_numeric($segment)) {
+                    return "[{$segment}]";
+                }
+
+                return ".{$segment}";
+            })
+            ->implode('');
     }
 
     public function vueModel(): string