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/Editroutes/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...
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
I'm not sure I understand the issue you are having.
Could you explain it a bit more?
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
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?)
What kind of validation do you use? If you add
emailto the validation list - it should automatically catch that the email is invalid.In other words - FluxUI can only add
Browserside 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
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 = '';
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!