在 Blade 视图中渲染表单

在继续之前，请确保 filament/forms 已安装在您的项目中。您可以通过运行以下命令进行检查：

bash

composer show filament/forms

如果尚未安装，请查阅安装指南并根据说明配置各个组件。

设置 Livewire 组件

首先，生成一个新的 Livewire 组件：

bash

php artisan make:livewire CreatePost

然后，在页面上渲染你的 Livewire 组件：

blade

@livewire('create-post')

或者，你可以使用一个全页的 Livewire 组件：

php

use App\Livewire\CreatePost;
use Illuminate\Support\Facades\Route;

Route::get('posts/create', CreatePost::class);

添加表单

在继续之前，请确保您的项目中已安装 Forms 包。请查阅安装指南并根据说明配置 各个组件。

在将表单添加到Livewire组件类时，有5个主要任务。每个都至关重要：

实现 HasSchemas 接口并使用 InteractsWithSchemas trait。
定义一个公共的 Livewire 属性来存储你的表单数据。在我们的示例中，我们会将其命名为 $data，但你可以随意命名。
添加一个 form() 方法，在这里配置表单。添加表单的 schema，并告诉 Filament 将表单数据存储在 $data 属性中 (使用 statePath('data'))。
在 mount() 中使用 $this->form->fill() 初始化表单。这对于你构建的每个表单都是必不可少的，即使它没有任何初始数据。
定义一个方法来处理表单提交。在我们的示例中，我们将其命名为 create()，但你可以随意命名。在该方法内部，你可以使用 $this->form->getState() 验证并获取表单数据。重要的是，你应当使用此方法，而不是直接访问 $this->data 属性，因为表单数据在返回之前需要经过验证并转换为有用格式。

php

<?php

namespace App\Livewire;

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Illuminate\Contracts\View\View;
use Filament\Schemas\Schema;
use Livewire\Component;

class CreatePost extends Component implements HasSchemas
{
    use InteractsWithSchemas;
    
    public ?array $data = [];
    
    public function mount(): void
    {
        $this->form->fill();
    }
    
    public function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('title')
                    ->required(),
                MarkdownEditor::make('content'),
                // ...
            ])
            ->statePath('data');
    }
    
    public function create(): void
    {
        dd($this->form->getState());
    }
    
    public function render(): View
    {
        return view('livewire.create-post');
    }
}

最后，在你的 Livewire 组件视图中，渲染表单：

blade

<div>
    <form wire:submit="create">
        {{ $this->form }}
        
        <button type="submit">
            Submit
        </button>
    </form>
    
    <x-filament-actions::modals />
</div>

<x-filament-actions::modals /> 用于渲染表单组件 [操作模态框](../schemas/actions) 。该代码可以放置在 <form> 元素之外的任何位置，只要它在 Livewire 组件内部即可。

在浏览器中访问你的 Livewire 组件，你应该会看到 components() 中的表单组件：

提交带有数据的表单，你将看到表单数据被转储到屏幕上。你可以将数据保存到一个模型中，而不是转储它：

php

use App\Models\Post;

public function create(): void
{
    Post::create($this->form->getState());
}

filament/forms 也包含以下包:

filament/操作
filament/模式
Filament/支持

这些包允许你在 Livewire 组件中使用它们的组件。
例如，如果你的表单使用了操作，请记住在你的 Livewire 组件类上实现 HasActions 接口并使用 InteractsWithActions trait。

如果您正在使用任何其他 Filament 组件在您的表单中，请务必安装并集成相应的包。

使用数据初始化表单

要使用数据填充表单，只需将该数据传递给 $this->form->fill() 方法。
例如，如果你正在编辑一个现有的帖子，你可能会这样做：

php

use App\Models\Post;

public function mount(Post $post): void
{
    $this->form->fill($post->attributesToArray());
}

务必使用 $this->form->fill() 方法而不是直接将数据赋值给 $this->data 属性。这是因为提交的数据需要在存储之前内部转换为有用的格式。

设置表单模型

让 $form 访问模型很有用，原因有几点：

它允许该表单中的字段从该模型加载信息。例如，选择字段可以从数据库加载其选项自动。
表单可以自动加载和保存模型的关联数据。例如，你有一个编辑帖子的表单，其中包含一个重复器用于管理与该帖子关联的评论。当你调用$this->form->fill([...])时，Filament 将自动加载该帖子的评论，并在你调用$this->form->getState()时，将其保存回关联。
诸如 exists() 和 unique() 的验证规则可以自动从模型中检索数据库表名。

建议在有模型时，始终将模型传递给表单. 如前所述，它解锁了 Filament 表单系统的许多新功能.

要将模型传递给表单，请使用$form->model()方法：

php

use Filament\Schemas\Schema;

public Post $post;

public function form(Schema $schema): Schema
{
    return $schema
        ->components([
            // ...
        ])
        ->statePath('data')
        ->model($this->post);
}

表单提交后传递表单模型

In some cases, the form's model is not available until the form has been submitted. For example, in a Create Post form, the post does not exist until the form has been submitted. Therefore, you can't pass it in to $form->model(). However, you can pass a model class instead:

php

use App\Models\Post;
use Filament\Schemas\Schema;

public function form(Schema $schema): Schema
{
    return $schema
        ->components([
            // ...
        ])
        ->statePath('data')
        ->model(Post::class);
}

单独来看，这不如传递模型实例强大。例如，文章创建后，关系将不会被保存到文章中。为此，你需要在文章创建后将它传递给表单，并调用 saveRelationships() 将关系保存到其中：

php

use App\Models\Post;

public function create(): void
{
    $post = Post::create($this->form->getState());
    
    // Save the relationships from the form to the post after it is created.
    $this->form->model($post)->saveRelationships();
}

保存表单数据到独立属性

在我们之前的所有示例中，我们一直将表单数据保存到 Livewire 组件上的公共 $data 属性。然而，您可以将数据保存到独立的属性中。例如，如果您有一个带有 title 字段的表单，您可以将表单数据保存到 $title 属性中。为此，完全不要向表单传递 statePath()。确保您的所有字段在类上都具有自己的公共属性。

php

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

public ?string $title = null;

public ?string $content = null;

public function form(Schema $schema): Schema
{
    return $schema
        ->components([
            TextInput::make('title')
                ->required(),
            MarkdownEditor::make('content'),
            // ...
        ]);
}

使用多个表单

许多表单可以使用 InteractsWithSchemas 特性定义。每个表单都应该使用一个同名方法：

php

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

public ?array $postData = [];

public ?array $commentData = [];

public function editPostForm(Schema $schema): Schema
{
    return $schema
        ->components([
            TextInput::make('title')
                ->required(),
            MarkdownEditor::make('content'),
            // ...
        ])
        ->statePath('postData')
        ->model($this->post);
}

public function createCommentForm(Schema $schema): Schema
{
    return $schema
        ->components([
            TextInput::make('name')
                ->required(),
            TextInput::make('email')
                ->email()
                ->required(),
            MarkdownEditor::make('content')
                ->required(),
            // ...
        ])
        ->statePath('commentData')
        ->model(Comment::class);
}

现在，每个表单都可以通过其名称进行寻址，而不是通过 form。例如，要填写帖子表单，你可以使用 $this->editPostForm->fill([...])，或者要从评论表单获取数据，你可以使用 $this->createCommentForm->getState()。

你会注意到每个表单都有其独特的 statePath()。每个表单都会将其状态写入你的 Livewire 组件上的一个不同数组，因此，定义公有属性， $postData 和 $commentData 在本例中很重要。

重置表单数据

您可以随时通过调用 $this->form->fill() 将表单重置为其默认数据。例如，您可能希望在每次提交表单后清除其内容：

php

use App\Models\Comment;

public function createComment(): void
{
    Comment::create($this->form->getState());

    // Reinitialize the form to clear its data.
    $this->form->fill();
}

使用 CLI 生成 Livewire 表单组件

建议您学习如何手动设置带有表单的 Livewire 组件，但一旦您熟练掌握，就可以使用 CLI 为您生成表单。

bash

php artisan make:filament-livewire-form RegistrationForm

这将生成一个新的 app/Livewire/RegistrationForm.php 组件，你可以对其进行自定义。

为 Eloquent 模型生成表单

Filament 也能够为特定的 Eloquent 模型生成表单。这些更强大，因为它们会自动为您保存表单中的数据，并且确保表单字段已正确配置以访问该模型。

当使用 make:livewire-form 命令生成表单时，它将询问模型的名称：

bash

php artisan make:filament-livewire-form Products/CreateProduct

为 Eloquent 记录生成编辑表单

默认情况下，将模型传递给 make:livewire-form 命令将生成一个在数据库中创建新记录的表单。如果您将 --edit 标志传递给该命令，它将为特定记录生成一个编辑表单。这将自动用记录中的数据填充表单，并将数据保存回模型当表单提交时。

bash

php artisan make:filament-livewire-form Products/EditProduct --edit

自动生成表单模式

Filament 还能够根据模型的数据列猜测你希望在模式中包含哪些表单字段。你可以在生成表单时使用 --generate 标志：

bash

php artisan make:filament-livewire-form Products/CreateProduct --generate

在继续之前，请确保 filament/forms 已安装在您的项目中。您可以通过运行以下命令进行检查：

bash

composer show filament/forms

如果尚未安装，请查阅安装指南并根据说明配置各个组件。

设置 Livewire 组件

首先，生成一个新的 Livewire 组件：

bash

php artisan make:livewire CreatePost

然后，在页面上渲染你的 Livewire 组件：

blade

@livewire('create-post')

或者，你可以使用一个全页的 Livewire 组件：

php

use App\Livewire\CreatePost;
use Illuminate\Support\Facades\Route;

Route::get('posts/create', CreatePost::class);

添加表单

在继续之前，请确保您的项目中已安装 Forms 包。请查阅安装指南并根据说明配置 各个组件。

在将表单添加到Livewire组件类时，有5个主要任务。每个都至关重要：

实现 HasSchemas 接口并使用 InteractsWithSchemas trait。
定义一个公共的 Livewire 属性来存储你的表单数据。在我们的示例中，我们会将其命名为 $data，但你可以随意命名。
添加一个 form() 方法，在这里配置表单。添加表单的 schema，并告诉 Filament 将表单数据存储在 $data 属性中 (使用 statePath('data'))。
在 mount() 中使用 $this->form->fill() 初始化表单。这对于你构建的每个表单都是必不可少的，即使它没有任何初始数据。
定义一个方法来处理表单提交。在我们的示例中，我们将其命名为 create()，但你可以随意命名。在该方法内部，你可以使用 $this->form->getState() 验证并获取表单数据。重要的是，你应当使用此方法，而不是直接访问 $this->data 属性，因为表单数据在返回之前需要经过验证并转换为有用格式。

php

<?php

namespace App\Livewire;

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Illuminate\Contracts\View\View;
use Filament\Schemas\Schema;
use Livewire\Component;

class CreatePost extends Component implements HasSchemas
{
    use InteractsWithSchemas;
    
    public ?array $data = [];
    
    public function mount(): void
    {
        $this->form->fill();
    }
    
    public function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('title')
                    ->required(),
                MarkdownEditor::make('content'),
                // ...
            ])
            ->statePath('data');
    }
    
    public function create(): void
    {
        dd($this->form->getState());
    }
    
    public function render(): View
    {
        return view('livewire.create-post');
    }
}

最后，在你的 Livewire 组件视图中，渲染表单：

blade

<div>
    <form wire:submit="create">
        {{ $this->form }}
        
        <button type="submit">
            Submit
        </button>
    </form>
    
    <x-filament-actions::modals />
</div>

在浏览器中访问你的 Livewire 组件，你应该会看到 components() 中的表单组件：

提交带有数据的表单，你将看到表单数据被转储到屏幕上。你可以将数据保存到一个模型中，而不是转储它：

php

use App\Models\Post;

public function create(): void
{
    Post::create($this->form->getState());
}

filament/forms 也包含以下包:

filament/操作
filament/模式
Filament/支持

如果您正在使用任何其他 Filament 组件在您的表单中，请务必安装并集成相应的包。

使用数据初始化表单

要使用数据填充表单，只需将该数据传递给 $this->form->fill() 方法。
例如，如果你正在编辑一个现有的帖子，你可能会这样做：

php

use App\Models\Post;

public function mount(Post $post): void
{
    $this->form->fill($post->attributesToArray());
}

务必使用 $this->form->fill() 方法而不是直接将数据赋值给 $this->data 属性。这是因为提交的数据需要在存储之前内部转换为有用的格式。

设置表单模型

让 $form 访问模型很有用，原因有几点：

它允许该表单中的字段从该模型加载信息。例如，选择字段可以从数据库加载其选项自动。
表单可以自动加载和保存模型的关联数据。例如，你有一个编辑帖子的表单，其中包含一个重复器用于管理与该帖子关联的评论。当你调用$this->form->fill([...])时，Filament 将自动加载该帖子的评论，并在你调用$this->form->getState()时，将其保存回关联。
诸如 exists() 和 unique() 的验证规则可以自动从模型中检索数据库表名。

建议在有模型时，始终将模型传递给表单. 如前所述，它解锁了 Filament 表单系统的许多新功能.

要将模型传递给表单，请使用$form->model()方法：

php

use Filament\Schemas\Schema;

public Post $post;

public function form(Schema $schema): Schema
{
    return $schema
        ->components([
            // ...
        ])
        ->statePath('data')
        ->model($this->post);
}

表单提交后传递表单模型

php

use App\Models\Post;
use Filament\Schemas\Schema;

public function form(Schema $schema): Schema
{
    return $schema
        ->components([
            // ...
        ])
        ->statePath('data')
        ->model(Post::class);
}

php

use App\Models\Post;

public function create(): void
{
    $post = Post::create($this->form->getState());
    
    // Save the relationships from the form to the post after it is created.
    $this->form->model($post)->saveRelationships();
}

保存表单数据到独立属性

php

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

public ?string $title = null;

public ?string $content = null;

public function form(Schema $schema): Schema
{
    return $schema
        ->components([
            TextInput::make('title')
                ->required(),
            MarkdownEditor::make('content'),
            // ...
        ]);
}

使用多个表单

许多表单可以使用 InteractsWithSchemas 特性定义。每个表单都应该使用一个同名方法：

php

use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

public ?array $postData = [];

public ?array $commentData = [];

public function editPostForm(Schema $schema): Schema
{
    return $schema
        ->components([
            TextInput::make('title')
                ->required(),
            MarkdownEditor::make('content'),
            // ...
        ])
        ->statePath('postData')
        ->model($this->post);
}

public function createCommentForm(Schema $schema): Schema
{
    return $schema
        ->components([
            TextInput::make('name')
                ->required(),
            TextInput::make('email')
                ->email()
                ->required(),
            MarkdownEditor::make('content')
                ->required(),
            // ...
        ])
        ->statePath('commentData')
        ->model(Comment::class);
}

重置表单数据

您可以随时通过调用 $this->form->fill() 将表单重置为其默认数据。例如，您可能希望在每次提交表单后清除其内容：

php

use App\Models\Comment;

public function createComment(): void
{
    Comment::create($this->form->getState());

    // Reinitialize the form to clear its data.
    $this->form->fill();
}

使用 CLI 生成 Livewire 表单组件

建议您学习如何手动设置带有表单的 Livewire 组件，但一旦您熟练掌握，就可以使用 CLI 为您生成表单。

bash

php artisan make:filament-livewire-form RegistrationForm

这将生成一个新的 app/Livewire/RegistrationForm.php 组件，你可以对其进行自定义。

为 Eloquent 模型生成表单

Filament 也能够为特定的 Eloquent 模型生成表单。这些更强大，因为它们会自动为您保存表单中的数据，并且确保表单字段已正确配置以访问该模型。

当使用 make:livewire-form 命令生成表单时，它将询问模型的名称：

bash

php artisan make:filament-livewire-form Products/CreateProduct

为 Eloquent 记录生成编辑表单

bash

php artisan make:filament-livewire-form Products/EditProduct --edit

自动生成表单模式

Filament 还能够根据模型的数据列猜测你希望在模式中包含哪些表单字段。你可以在生成表单时使用 --generate 标志：

bash

php artisan make:filament-livewire-form Products/CreateProduct --generate

文档导航

设置 Livewire 组件

添加表单

使用数据初始化表单

设置表单模型

表单提交后传递表单模型

保存表单数据到独立属性

使用多个表单

重置表单数据

使用 CLI 生成 Livewire 表单组件

为 Eloquent 模型生成表单

为 Eloquent 记录生成编辑表单

自动生成表单模式

设置 Livewire 组件

添加表单

使用数据初始化表单

设置表单模型

表单提交后传递表单模型

保存表单数据到独立属性

使用多个表单

重置表单数据

使用 CLI 生成 Livewire 表单组件

为 Eloquent 模型生成表单

为 Eloquent 记录生成编辑表单

自动生成表单模式