Filament•3y ago•

10 replies

Custom Field does not submit data

Created a custom field as in the docs, using

artisan make:form-field ProductPrices

artisan make:form-field ProductPrices

. The component looks like this and receives an array of

Currency

Currency

models:

class ProductPrices extends Field {
  protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

class ProductPrices extends Field {
  protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

And I use it in my form as:

->schema([
...
 ProductPrices::make( 'pricesTest' )->currencies( Currency::all() ),
...]);

->schema([
...
 ProductPrices::make( 'pricesTest' )->currencies( Currency::all() ),
...]);

The view of my custom component is:

@php
    $currencies = $getCurrencies();
    $id = $getId();
    $statePath = $getStatePath();
@endphp

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div>
        @foreach($currencies as $currency)
            @php $subStatePath = $statePath.'.'.$currency->id;  @endphp
            @php /* @var \App\Models\Currencies\Currency $currency */ @endphp
            <div>
               <input {{ $applyStateBindingModifiers('wire:model') }}="{{ $subStatePath }}">
            </div>
        @endforeach
    </div>
</x-dynamic-component>

@php
    $currencies = $getCurrencies();
    $id = $getId();
    $statePath = $getStatePath();
@endphp

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div>
        @foreach($currencies as $currency)
            @php $subStatePath = $statePath.'.'.$currency->id;  @endphp
            @php /* @var \App\Models\Currencies\Currency $currency */ @endphp
            <div>
               <input {{ $applyStateBindingModifiers('wire:model') }}="{{ $subStatePath }}">
            </div>
        @endforeach
    </div>
</x-dynamic-component>

And an input field is indeed generated for every currency:

<div><input wire:model="data.pricesTest.1"></div>

<div><input wire:model="data.pricesTest.1"></div>

EditProduct extends EditRecord

EditProduct extends EditRecord

, where I use the

ProductResource

ProductResource

with said form I do a

dd()

dd()

 protected function mutateFormDataBeforeSave( array $data ): array {
        dd('before',$data);
    }

 protected function mutateFormDataBeforeSave( array $data ): array {
        dd('before',$data);
    }

array:12 [
 ...
  "pricesTest" => null
...
]

array:12 [
 ...
  "pricesTest" => null
...
]

Other values of 'default' Filament form fields are there but I cannot figure out why my custom field

PricesTest

PricesTest

isn't submitted into the form data. Can someone please point me where I'm going wrong?

Solution

Thanks again for your help @Lara Zeus . It seems that the

setup()

setup()

function in the

ProductPrices

ProductPrices

does the trick. I think it needs to be setup as an array. And it works when setting it up in the same way that

CheckboxList()

CheckboxList()

does. Final working code of the custom field:

class ProductPrices extends Field {

    protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    protected function setUp(): void
    {
        parent::setUp();

        $this->default([]);

        $this->afterStateHydrated(static function (ProductPrices  $component, $state) {
            if (is_array($state)) {
                return;
            }

            $component->state([]);
        });
    }

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

class ProductPrices extends Field {

    protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    protected function setUp(): void
    {
        parent::setUp();

        $this->default([]);

        $this->afterStateHydrated(static function (ProductPrices  $component, $state) {
            if (is_array($state)) {
                return;
            }

            $component->state([]);
        });
    }

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

Jump to solution

Custom Field does not submit data

Created a custom field as in the docs, using

artisan make:form-field ProductPrices

artisan make:form-field ProductPrices

. The component looks like this and receives an array of

Currency

Currency

models:

class ProductPrices extends Field {
  protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

class ProductPrices extends Field {
  protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

And I use it in my form as:

->schema([
...
 ProductPrices::make( 'pricesTest' )->currencies( Currency::all() ),
...]);

->schema([
...
 ProductPrices::make( 'pricesTest' )->currencies( Currency::all() ),
...]);

The view of my custom component is:

@php
    $currencies = $getCurrencies();
    $id = $getId();
    $statePath = $getStatePath();
@endphp

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div>
        @foreach($currencies as $currency)
            @php $subStatePath = $statePath.'.'.$currency->id;  @endphp
            @php /* @var \App\Models\Currencies\Currency $currency */ @endphp
            <div>
               <input {{ $applyStateBindingModifiers('wire:model') }}="{{ $subStatePath }}">
            </div>
        @endforeach
    </div>
</x-dynamic-component>

@php
    $currencies = $getCurrencies();
    $id = $getId();
    $statePath = $getStatePath();
@endphp

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div>
        @foreach($currencies as $currency)
            @php $subStatePath = $statePath.'.'.$currency->id;  @endphp
            @php /* @var \App\Models\Currencies\Currency $currency */ @endphp
            <div>
               <input {{ $applyStateBindingModifiers('wire:model') }}="{{ $subStatePath }}">
            </div>
        @endforeach
    </div>
</x-dynamic-component>

And an input field is indeed generated for every currency:

<div><input wire:model="data.pricesTest.1"></div>

<div><input wire:model="data.pricesTest.1"></div>

EditProduct extends EditRecord

EditProduct extends EditRecord

, where I use the

ProductResource

ProductResource

with said form I do a

dd()

dd()

 protected function mutateFormDataBeforeSave( array $data ): array {
        dd('before',$data);
    }

 protected function mutateFormDataBeforeSave( array $data ): array {
        dd('before',$data);
    }

array:12 [
 ...
  "pricesTest" => null
...
]

array:12 [
 ...
  "pricesTest" => null
...
]

Other values of 'default' Filament form fields are there but I cannot figure out why my custom field

PricesTest

PricesTest

isn't submitted into the form data. Can someone please point me where I'm going wrong?

Solution

Thanks again for your help @Lara Zeus . It seems that the

setup()

setup()

function in the

ProductPrices

ProductPrices

does the trick. I think it needs to be setup as an array. And it works when setting it up in the same way that

CheckboxList()

CheckboxList()

does. Final working code of the custom field:

class ProductPrices extends Field {

    protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    protected function setUp(): void
    {
        parent::setUp();

        $this->default([]);

        $this->afterStateHydrated(static function (ProductPrices  $component, $state) {
            if (is_array($state)) {
                return;
            }

            $component->state([]);
        });
    }

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

class ProductPrices extends Field {

    protected string $view = 'forms.components.product-prices';

    protected array|Arrayable|string|Closure|null $currencies = null;

    protected function setUp(): void
    {
        parent::setUp();

        $this->default([]);

        $this->afterStateHydrated(static function (ProductPrices  $component, $state) {
            if (is_array($state)) {
                return;
            }

            $component->state([]);
        });
    }

    public function currencies( array|Arrayable|string|Closure|null $currencies ): static {
        $this->currencies = $currencies;

        return $this;
    }

    public function getCurrencies(): Collection {
        return $this->evaluate( $this->currencies ) ?? new Collection();
    }
}

Jump to solution

Custom Field does not submit data

Custom Field does not submit data

Similar Threads

Similar Threads

Similar Threads