开始
准备Livewire组件
实现 HasForms
接口,使用 InteractsWithForms
trait:
<?php
namespace App\Http\Livewire;
use Filament\Forms;
use Illuminate\Contracts\View\View;
use Livewire\Component;
class EditPost extends Component implements Forms\Contracts\HasForms // [tl! focus]
{
use Forms\Concerns\InteractsWithForms; // [tl! focus]
public function render(): View
{
return view('edit-post');
}
}
在 Livewire 组件视图中,渲染表单:
<form wire:submit.prevent="submit">
{{ $this->form }}
<button type="submit">
Submit
</button>
</form>
最后,将表单字段控件和布局组件添加到 getFormSchema()
方法中:
<?php
namespace App\Http\Livewire;
use Filament\Forms;
use Illuminate\Contracts\View\View;
use Livewire\Component;
class EditPost extends Component implements Forms\Contracts\HasForms
{
use Forms\Concerns\InteractsWithForms;
public Post $post;
public $title;
public $content;
public function mount(): void
{
$this->form->fill([
'title' => $this->post->title,
'content' => $this->post->content,
]);
}
protected function getFormSchema(): array // [tl! focus:start]
{
return [
Forms\Components\TextInput::make('title')->required(),
Forms\Components\MarkdownEditor::make('content'),
// ...
];
} // [tl! focus:end]
public function submit(): void
{
// ...
}
public function render(): View
{
return view('edit-post');
}
}
在浏览器中访问 Livewire 组件,你就能看到 getFormSchema()
方法中的表单组件。