Как работать с пользовательскими полями формы в Filament Form Builder для Laravel

Информация о материале: Родительская категория: Конструктор форм (Form Builder); Категория: Поля конструктора форм Filament

Работа с пользовательскими полями формы в Filament Form Builder для Laravel — Пользовательские поля форм в Filament Form Builder для Laravel

Вьюхи полей в Filament Laravel

Помимо создания пользовательских полей, вы можете создавать поля " представления", которые позволяют создавать пользовательские поля без дополнительных классов PHP.

use Filament\Forms\Components\ViewField;
 
ViewField::make('rating')
    ->view('filament.forms.components.range-slider')

При этом подразумевается, что существует файл resources/views/filament/forms/components/range-slider.blade.php.

Передача данных во вьюху поля в Filament Laravel

С помощью функции viewData() можно передать представлению простой массив данных:

use Filament\Forms\Components\ViewField;
 
ViewField::make('rating')
    ->view('filament.forms.components.range-slider')
    ->viewData([
        'min' => 1,
        'max' => 5,
    ])

Однако более сложная конфигурация может быть достигнута с помощью класса пользовательского поля.

Классы пользовательских полей Filament Form Builder для Laravel

Можно создавать собственные классы и представления пользовательских полей, которые можно использовать в своем проекте и даже выпустить в виде плагина для сообщества.

Если вы создаете простое пользовательское поле для однократного использования, то вместо этого можно использовать поле представления для рендеринга любого пользовательского файла Blade.

Чтобы создать класс и представление пользовательского поля, можно воспользоваться следующей командой:

php artisan make:form-field RangeSlider

В результате будет создан следующий класс поля:

use Filament\Forms\Components\Field;
 
class RangeSlider extends Field
{
    protected string $view = 'filament.forms.components.range-slider';
}

Он также создаст файл представления по адресу resources/views/filament/forms/components/range-slider.blade.php.

Как работают поля в Filament Form Builder

Компоненты Livewire — это PHP-классы, состояние которых хранится в браузере пользователя. Когда выполняется сетевой запрос, состояние отправляется на сервер и заполняется в публичных свойствах класса компонента Livewire, где к нему можно получить доступ так же, как и к любому другому свойству класса в PHP.

Представьте, что у вас есть компонент Livewire с публичным свойством $name. Это свойство можно привязать к полю ввода в HTML компонента Livewire одним из двух способов: с помощью атрибута wire:model или связав его со свойством Alpine.js:

<input wire:model="name" />

или

<div x-data="{ state: $wire.$entangle('name') }">
    <input x-model="state" />
</div>

Когда пользователь вводит текст в поле ввода, свойство $name обновляется в классе компонента Livewire. Когда пользователь отправляет форму, свойство $name отправляется на сервер, где оно может быть сохранено.

Это основа того, как работают поля в Filament. Каждому полю присваивается публичное свойство в классе компонента Livewire, в котором хранится состояние поля. Имя этого свойства мы называем "state path" (путь к состоянию) поля. Получить доступ к пути состояния поля можно с помощью функции $getStatePath() в представлении поля:

<input wire:model="{{ $getStatePath() }}" />

или

<div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
    <input x-model="state" />
</div>

Если ваш компонент сильно зависит от библиотек сторонних разработчиков, рекомендуется асинхронно загружать компонент Alpine.js с помощью системы активов (asset system) Filament. Это гарантирует, что компонент Alpine.js будет загружаться только тогда, когда он нужен, а не при каждой загрузке страницы. Чтобы узнать, как это сделать, ознакомьтесь с документацией по активам Filament.

Рендеринг обертки поля в конструкторе форм Filament Laravel

Filament включает компонент " field wrapper" (обертка поля), который может отображать метку поля, ошибки валидации и любой другой текст, окружающий поле. Обертку поля можно отобразить в представлении следующим образом:

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <!-- Field -->
</x-dynamic-component>

Рекомендуется использовать компонент "обертка поля" всегда, когда это уместно, так как это обеспечит соответствие дизайна поля остальной части формы.

Доступ к записи Eloquent из поля Filament Form Builder

Внутри представления доступ к записи Eloquent можно получить с помощью функции $getRecord():

<div>
    {{ $getRecord()->name }}
</div>

Соответствие модификаторов привязки к состоянию поля в Filament Form Builder

Когда поле привязывается к пути состояния (state path), можно использовать модификатор defer, чтобы состояние отправлялось на сервер только после того, как пользователь отправит форму, или при следующем запросе Livewire. Это является поведением по умолчанию.

Однако можно использовать модификатор live() для поля, чтобы состояние отправлялось на сервер сразу же, когда пользователь взаимодействует с полем. Это позволяет использовать множество дополнительных возможностей, о которых рассказывается в разделе документации "Дополнительные возможности".

Filament предоставляет функцию $applyStateBindingModifiers(), которую можно использовать в представлении для применения любых модификаторов привязки состояния к привязке wire:model или $wire.$entangle():

<input {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}" />

или

<div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
    <input x-model="state" />
</div>

Перевод с английского официальной документации Filament:
https://filamentphp.com/docs/3.x/forms/fields/custom

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Произвольные поля форм в Filament Laravel