Skip to main content

CRUD: Edit Task Form

Premium
2:20

Text Version of the Lesson

Now, let's build the page to edit the task. It will be structurally similar to the Create form but with a few differences.

Table: Link to Edit Route

We need to add the "Edit" button to the table. But before that, we need a Livewire component and a Route.

php artisan make:livewire Tasks/Edit

routes/web.php:

use App\Livewire\Tasks;
use App\Livewire\Settings\Appearance;
use App\Livewire\Settings\Password;
use App\Livewire\Settings\Profile;
use Illuminate\Support\Facades\Route;
 
Route::get('/', function () {
    return view('welcome');
})->name('home');
 
Route::view('dashboard', 'dashboard')
    ->middleware(['auth', 'verified'])
    ->name('dashboard');
 
Route::middleware(['auth'])->group(function () {
    Route::redirect('settings', 'settings/profile');
 
    Route::get('settings/profile', Profile::class)->name('settings.profile');
    Route::get('settings/password', Password::class)->name('settings.password');
    Route::get('settings/appearance', Appearance::class)->name('settings.appearance');
 
    Route::get('tasks', Tasks\Index::class)->name('tasks.index');
    Route::get('tasks/create', Tasks\Create::class)->name('tasks.create');
    Route::get('tasks/{task}/edit', Tasks\Edit::class)->name('tasks.edit'); 
});
 
require __DIR__.'/auth.php';

Now, we can add link to the "Edit" button.

resources/views/livewire/tasks/index.blade.php

BEFORE:

<flux:button href="#" variant="filled">{{ __('Edit') }}</flux:button>

AFTER:

<flux:button href="{{ route('tasks.edit', $task) }}" variant="filled">{{ __('Edit') }}</flux:button>

Edit Form

Now, we can inputs and the form.

resources/views/livewire/tasks/edit.blade.php:

<section class="max-w-5xl">
    <form wire:submit="save" class="flex flex-col gap-6">
        <flux:input
            wire:model="name"
            :label="__('Task Name')"
            required
            badge="required"
        />
 
        <flux:checkbox
            wire:model="is_completed"
            label="Completed?"
        />
 
        <div>
            <flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
        </div>
    </form>
</section>

Of course, when you visit the edit page...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (31 h 16 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

D
dbtodev ✓ Link copied!

Hy, I'm adjusting the form while practicing this course. I'm using flux and I notice in my "Email" field to which I added the "type:email" parameter as specified in the fluxui documentation. The email "A@B.C" is correctly handled for A@B but not .C. ??? I would have liked confirmation that this is indeed coming from flux, please. THANK YOU Damien from France

M
Modestas ✓ Link copied!

I'm not sure I understand the issue you are having.

Could you explain it a bit more?

D
dbtodev ✓ Link copied!

Regarding the management of an email form field. I'm using flux and I've added the "type:email" parameter. Email verification should be performed for: "xy@gmail.com," but it's handled correctly for "xy@gmail" but not ".com"??? xy@gmail passes the verification point, and that's worrying. I don't see a solution with fluxui? What could be causing this? THANKS Damien from France

D
dbtodev ✓ Link copied!

I can of course adjust it in the controller with a regex, but I shouldn't get to that point. But the question is, is this my problem or is it FluxUI's (version bug?)

M
Modestas ✓ Link copied!

What kind of validation do you use? If you add email to the validation list - it should automatically catch that the email is invalid.

In other words - FluxUI can only add Browser side validation, which it does not control. It's up to the browser to parse that.

Once the request made into the server - laravel validation rules should apply

D
dbtodev ✓ Link copied!

Hello, Sorry for the late reply. I fixed the problem the usual way.

Still, validation with FluxUI isn't working completely. I think an update is needed.

Regarding a valid address: dbtodev@gmail.com It warns that an address is invalid when you try to validate:

1 - dbtodev (please include @ in the email address. The @ symbol is missing in dbtodev)

2 - dbtodev@ (Please enter the missing part after the @ symbol. The dbtodev@ address is incomplete) But if you have "dbtodev@gmail" without the dot and the extension : The validation passes !

In Edit/Create views:

flux:field <flux:input wire:model="entityMail" :label="('@mail')" type="email" required badge="required" /> <flux:error name="email" /> flux:field <flux:input wire:model="entityMail" :label="__('@mail')" type="email" required badge="obligatoire" /> <flux:error name="email" /> </flux:field>

In the livewire controller:

#[Validate('required|email|string|max:255')] public string $entityMail = '';

M
Modestas ✓ Link copied!

This is an expected solution to the issue :)

Browser based email validation is questionable at most times and the issue you saw - is browser side validation.

Now, the smart thing (which you did!) is to add back-end validation. In this case, you added livewire, but even for Blade - the solution is the same :)

Glad you resolved the issue!