forms

app/Http/Livewire/ApplicationForm.php

@@ -15,7 +15,11 @@ class ApplicationForm extends Component
     public string $git_branch;
     public string|null $git_commit_sha;
 
-    public function mount() {
+    protected $rules = [
+        'name' => 'required|min:6'
+    ];
+    public function mount()
+    {
         $this->application = Application::find($this->applicationId);
         $this->fill([
             'name' => $this->application->name,
@@ -25,5 +29,9 @@ class ApplicationForm extends Component
             'git_commit_sha' => $this->application->git_commit_sha,
         ]);
     }
-
+    public function submit()
+    {
+        $this->validate();
+        dd($this->name);
+    }
 }

app/View/Components/Input.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Input extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(public string $name, public bool $required = false)
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.input');
+    }
+}

resources/views/components/input.blade.php

@@ -0,0 +1,6 @@
+<label for={{ $name }}>{{ $name }}</label>
+<input id={{ $name }} wire:model={{ $name }} type="text" name={{ $name }}
+    {{ $required }} />
+@error($name)
+    <span class="text-red-500">{{ $message }}</span>
+@enderror

resources/views/livewire/application-form.blade.php

@@ -1,15 +1,12 @@
 <div>
-    <form class="flex flex-col">
+    <form wire:submit.prevent='submit' class="flex flex-col">
-        <label>Name</label>
+        <x-input name="name" required="true" />
-        <input wire:model="name" type="text" name="name" />
+        <x-input name="fqdn" />
-        <label>Fqdn</label>
+        <x-input name="git_repository" />
-        <input wire:model="fqdn" type="text" name="fqdn" />
+        <x-input name="git_branch" />
-        <label>Repository</label>
+        <x-input name="git_commit_sha" />
-        <input wire:model="git_repository" type="text" name="git_repository" />
+        <button type="submit">
-        <label>Branch</label>
+            Submit
-        <input wire:model="git_branch" type="text" name="git_branch" />
+        </button>
-        <label>Commit SHA</label>
-        <input wire:model="git_commit_sha" type="text" name="git_commit_sha" />
-        
     </form>
 </div>