Livewire add comment modal component - laravel

Question

I'm struggling to get a form parameter submitted to a livewire modal. I'm using laravel9 with php8.1 and have installed wire-elements/modal via composer (v1.0.6) I followed this guide.
So I have a modal.blade.php file in my view components folder with the following:
#props(['formAction' => false])
<div>
#if($formAction)
<form wire:submit.prevent="{{ $formAction }}">
#endif
<div class="bg-white p-4 sm:px-6 sm:py-4 border-b border-gray-150">
#if(isset($title))
<h3 class="text-lg leading-6 font-medium text-gray-900">
{{ $title }}
</h3>
#endif
</div>
<div class="bg-white px-4 sm:p-6">
<div class="space-y-6">
{{ $content }}
</div>
</div>
<div class="bg-white px-4 pb-5 sm:px-4 sm:flex">
{{ $buttons }}
</div>
#if($formAction)
</form>
#endif
</div>
On my test page I have a link to open the Modal which contains a text area for the comment:
<x-jet-button wire:click="$emit( 'openModal', 'add-comment',{{ json_encode(['job_number' => $job->number]) }} )">
{{ __('Add') }}
</x-jet-button>
The livewire component is as follows:
(add-comment.blade.php)
<x-modal formAction="create">
<x-slot name="title">
Add a Comment
</x-slot>
<x-slot name="content">
<label for="comment">Comment Narrative:</label>
<textarea id="comment" name="comment" rows="4" cols="36"></textarea>
</x-slot>
<x-slot name="buttons">
<x-jet-button class="mx-2" type="submit">
{{ __('Submit') }}
</x-jet-button>
<x-jet-button type="button" class="mx-2" wire:click="$emit('closeModal')">
{{ __('Close') }}
</x-jet-button>
</x-slot>
</x-modal>
(AddComment.php)
<?php
namespace App\Http\Livewire;
use App\Models\JobComment;
use Illuminate\Support\Facades\Auth;
use LivewireUI\Modal\ModalComponent;
class AddComment extends ModalComponent
{
public string $comment = '';
public int $job_number;
protected $listeners =['refresh' => '$refresh'];
public function render()
{
return view('livewire.add-comment');
}
public function create()
{
$comment = new JobComment();
$comment->comment = $this->comment;
$comment->job_number = $this->job_number;
$comment->user_id = Auth::id();
$comment->save();
$this->closeModal();
}
public static function closeModalOnEscape(): bool
{
return false;
}
public static function destroyOnClose(): bool
{
return true;
}
}
When i click the button on my test page the modal appears and has the desired content. If I enter some text in the textarea and click the submit a new comment is added to the database but the comment itself is an empty string.
In addition if I click the close button on this form I am unable to reopen the modal but if I click outside the modal it closes and can be opened again (but saving this comment is the issue here).
I have tried using true instead of false in the modal.blade.php file (#props(['formAction' => true])) but it made no difference and my comment is empty
Any ideas?

Answer 1

So with this the issue was i hadn't binded to the model so I amended the text area element to this
<textarea wire:model.defer="comment" id="comment" rows="4" cols="36">