🗂

Laravel Filamentのインプット要素(Form Builder)まとめ

2023/11/20に公開

Laravel

PHP

filament

tech

filamentのFormBuilderについて日本語でまとめておく。
毎回本家のサイトを見て回るのは結構面倒なので・・・
公式はここ

読み込むライブラリ

use Filament\Forms\Components\

Filamentの公式では、ライブラリーの深さがバラバラで都度判断しないといけないけど、
上のように読み込むと楽。

最低限の利用

public function form(Form $form): Form
{
    return $form
        ->schema([
            Components\TextInput::make('title'),
            Components\TextInput::make('slug'),
            Components\RichEditor::make('content'),
        ]);
}

で

みたいになる。

横方向の分割数を指定

$form
    ->schema([
        // ...
    ])
    ->columns(1);

特定の要素だけ、2個分の幅を使いたいとき

    return $form
        ->schema([
            Components\TextInput::make('title'),
            Components\TextInput::make('slug'),
            Components\RichEditor::make('content')
	    ->columnSpan(2),
        ]);

表示される項目名を日本語にしたい

Components\TextInput::make('name')->laravel('名前'),

バリデーションの仕方

例えば、必須と最大入力文字数を確認したければこんな感じ

 Components\TextInput::make('title')
        ->required()
        ->maxLength(255),

エラー文を自由に変更する

Components\TextInput::make('password')->label('パスワード')
	//省略
	->regex('/\A(?=.*?[a-z])(?=.*?\d)(?=.*?[!-\/:-@[-`{-~])[!-~]{8,}+\z/i')
	//エラー文
	->validationMessages([
	    'regex' => ':attributeは半角英数字記号それぞれ1文字以上使用した8文字以上で指定してください',
	]),

バリデーションの種類

項目の種類

textInput

TextInput::make('name')

パスワードの時

以下のようにするととてもいい。

Components\TextInput::make('password')->label('パスワード')
                    //オートコンプリートを無効にする
                    ->autocomplete(false)
                    //パスワードの入力として登録する
                    ->password()
                    //保存時にハッシュ加されたパスワードを送る
                    ->dehydrateStateUsing(fn (string $state): string => Hash::make($state))
                    //パスワードの入力が無い時は何もしない
                    ->dehydrated(fn (?string $state): bool => filled($state))
                    //新規作成時だけ必須
                    ->required(fn (string $operation): bool => $operation === 'create')
		    //半角英数字記号それぞれ1文字以上使用し、8文字以上かどうか
		    ->regex('/\A(?=.*?[a-z])(?=.*?\d)(?=.*?[!-\/:-@[-`{-~])[!-~]{8,}+\z/i'')
		    //エラー文
		    ->validationMessages([
        'regex' => ':attributeは半角英数字記号それぞれ1文字以上使用した8文字以上で指定してください',
    ]),

Select

Checkbox

Toggle

Checkbox list

複雑な事をしたい

Selectで有る選択肢を指定した時だけ、項目を非表示(表示)にしたい

下の例だと、status選択肢が「Published」を選択していなければ、
published_atフィールドは非表示になる。

use Filament\Forms\Get;
[
    Components\Select::make('status')
        ->options([
            'draft' => 'Draft',
            'reviewing' => 'Reviewing',
            'published' => 'Published',
        ])
        ->live(),
    Components\DateTimePicker::make('published_at')
        ->hidden(fn (Get $get) => $get('status') !== 'published'),
]

`->live()'を使う事で、全ての項目に値が変更されたことを伝える事ができる
上の例だと、こんな感じ

テキストを入力したら他のフィールドにも自動で入力する


use Filament\Forms\Set;
[
    TextInput::make('title')
        ->live()
        ->afterStateUpdated(function (Set $set, $state) {
            $set('slug', Str::slug($state));
        }),
    TextInput::make('slug')
]

もっと複雑な事もできるけど、一旦ここまで