@tanthammar you can test the nested KeyValfields with the following:

Create a custom field:

<?php

namespace App\View;

use Tanthammar\TallForms\KeyVal;

class CustomKeyVal extends KeyVal
{
    public $allowed_in_array = true;
}

and then used it:

[
    KeyVal::make('Nested')->fields([
        \App\View\CustomKeyVal::make('Names')->fields([
            Input::make('Deutsch', 'de')->rules('required'),
            Input::make('English', 'en')->rules('required'),
        ]),
    ]),
]

Describe the bug I was following your documentation wiki for installing tall-forms and on the wrapper-layout step, I came into a problem that I am unable to solve. I am farely new to laravel so if there is something I skipped please be kind enough to help. Screenshots

Environment:

• Tall-forms version: ^5.0
• Livewire version: ^2.0
• Laravel version: ^8.0
• AlpineJS version (only needed if problem is Alpine related):
• $wrapWithLayout true/false: Not Sure where to set this.
  • if true, Are you using your own wrapper component or the default one?: the default one
• Optional model binding? no
• Have you published the view files?: no
• Have you published, and edited the config file?: yes published but not edited.
• Is it a Create or Update form?: not applicable

Fields Definition Please paste the code for your fields that is related to this issue.

There seems to be a problem with the mount_form method.

$this->previous = \URL::previous(); is causing an CorruptComponentPayloadException:

Livewire encountered corrupt data when trying to hydrate the [xyz] component. Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests.

If I comment out line 38 in FormComponent.php everything works fine. I use the latest versions of laravel, livewire and tall-forms.

Hi, and thanks for a fantastic package!

I'm translating all the labels in the form, so the fields are instantiated using both a label and a key. The labels are displayed using the translation.

The problem is that the form validation messages uses the key, not the translation, to display form errors.

Is there a way to use the translated labels in the error messages without using the errorMsg() function?

1. Famous quill editor field.

use Tanthammar\TallForms\QuillEditor;

QuillEditor::make('global.post.content', 'content')
                ->rules('required|string')
                ->allowMedia() //allow Media (image,video,url, fx) in toolbar - default is false
                ->theme('bubble') // default is 'snow'
                ->quillAdvanced() // add all the advanced quill options to the toolbar - default is false
                ->default('compose an awesome post...');

2. Choice (Select2 style field)

use Tanthammar\TallForms\Choice;
Choice::make('Choice')
        ->options($options)
        ->placeholder('Please select an option')
        ->rules(['required', Rule::in(array_values($options))]);

I've used the example in the wiki, but the arrays do not show up. You see only Owner, but other than that there are no other fields. Am I missing something? I believe I've done everything as described.

Field::make('Owners')->array([
        ArrayField::make('Full Name')->input()->placeholder('Full Name')->rules('required'),
        ArrayField::make('Phone Number')->input('tel')->placeholder('Phone Number'),
    ]),

Describe the bug You can't reference the model within the component because it is null.

The reason I'm trying to pass in the model in the directive is that the model instance is also not being picked up from the route. Consider this url:

domain.test/admin/term/2569/edit

// Route is declared as
Route::get('/term/{id}/edit', 'TermEdit')
    ->name(term.edit');

I'm expecting the fields on the edit form to have data, but they don't. When I dump $term in the component it's empty. I then tried to pass in the model, but that also does not work (tried dumping $this->model).

Environment:

• Tall-forms version: latest
• Livewire version: latest
• AlpineJS version (only needed if problem is Alpine related): latest
• SpaMode true/false: false
  • if true, Are you using your own wrapper component or the default one?:
  • if true, Are you using a Route::livewire for model binding?
• Have you published the view files?: Yes
• Have you published, and edited the config file?: Yes
• Is it a Create or Update form?: Update
• Have you installed and configured the laravel-blade-icons package?: Yes

Fields Definition Field::make('Title', 'title')->input()->rules('required'),

PHP8 has been released and the community is upgrading. I did not look into your test suite and source code, but at least we need composer updated.

composer.json

"require": {
   "php": "^8.0|^7.4",

Hello. I am new to laravel. I want to use your package for my project. But something does not work out, I have already read the entire wiki. Created a form php artisan make:tall-form createOrder --model=Orders --path=Forms --action=create

/app/Http/Livewire/Forms/createOrder.php

namespace App\Http\Livewire\Forms;

use App\Models\Orders;
use Livewire\Component;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallForm;

class createOrder extends Component {

	use TallForm;

	public function mount( ? Orders $orders) {
		//Gate::authorize()
		$this->fill([
			'formTitle' => trans('global.create') . ' ' . trans('crud.orders.title_singular'),
			'wrapWithView' => false, //see https://github.com/tanthammar/tall-forms/wiki/installation/Wrapper-Layout
			'showGoBack' => false,
		]);

		$this->mount_form($orders); // $orders from hereon, called $this->model
	}

	// Mandatory method
	public function onCreateModel($validated_data) {
		// Set the $model property in order to conditionally display fields when the model instance exists, on saveAndStayResponse()
		$this->model = Orders::create($validated_data);
	}

	// OPTIONAL method used for the "Save and stay" button, this method already exists in the TallForm trait
	public function onUpdateModel($validated_data) {
		$this->model->update($validated_data);
	}

	public function fields() {
		return [
			Input::make('Name')->rules('required'),
		];
	}
}

resources/views/livewire/orders.blade.php

<livewire:forms.create-order :orders="$orders" />

I get an error

ErrorException
Undefined variable: orders (View: /var/www/autokit/resources/views/livewire/orders.blade.php)

Laravel 8 Livewire 2.3.1

I have a couple of forms which are using the saveFoo method, one being a file uploader, and one uses checkboxes. Followed your examples (very handy i must add) and it all appeared to work fine, except it wouldnt save to the db table.

On the file upload, i tried with updatedFoo method, and the file would be uploaded and stored, but the value wouldnt be saved to the db table.

On the checkboxes, despite multiple boxes being checked, a dump of the $validated_value returns null.

I will freely admit, i've just started paying with this, and this could be a 'user error' and not necessarily a bug, but after seeing it on two separate things, i wondered if it may be related.

Environment:

• Tall-forms version: 4.1.2
• Livewire version: 1.2
• Laravel: 8.6
• Is it a Create or Update form?: Update
• Have you installed and configured the laravel-blade-icons package?: Yes

Fields Definition Component example (checkboxes) namespace App\Http\Livewire\Forms;

public $channels;

public function mount(Gateway $gateway)
{
    //Gate::authorize()
    $this->fill([

        'wrapWithView' => false, //see https://github.com/tanthammar/tall-forms/wiki/installation/Wrapper-Layout
        'showGoBack' => false,
        'showReset' => false,
        'showDelete' => false,
        'inline' => false,
        'showTitle' => false,
    ]);

    $this->mount_form($gateway); // $gateway from hereon, called $this->model
}

// Optional method, this already exists in the TallForm trait
public function onUpdateModel($validated_data)
{
    $this->model = $this->model->update($validated_data);
}

public function beforeFormProperties()
{
    // get existing relations, read the checkboxes docs about integer values
    $this->model->channel_ids = array_map('strval', optional($this->model->channels)->pluck('id')->all());

    // set the checkboxes options
    $this->channels = Channel::orderBy('name')->get()->pluck('id', 'name')->all();
}

public function fields()
{

    return [
        Checkboxes::make('Select gateway channels', 'channel_ids')
            ->options($this->channels)
            ->relation()
            ->rules('nullable|array|exists:channels,id')
            ->wire('wire:model.defer')
    ];

}

public function saveChannelIds($validated_value)
{
    //get the options that the user selected via the field name
    $selected_channels = $validated_value;

    //if the user unselected all available options it means we have to detach any existing relations
    dd($selected_channels);
    if (blank($selected_channels)) {
        $this->model->channels()->detach(); //detach all existing relations
    } else {
        //in this example we scoped the events to the users current team, so we check which events the user is allowed to attach
        //this is also a good example on how to validate the submitted data
        $allowed_to_sync = filled($selected_channels) ? array_intersect($selected_channels, array_values($this->channels)) : [];
        if (filled($allowed_to_sync)) $this->model->channels()->sync($selected_channels);
    }
}

}

Returns an error when changing a select several times.

module.esm.js?027e:1656 Uncaught ReferenceError: livewireValue is not defined
    at eval (eval at safeAsyncFunction (module.esm.js:1:1), <anonymous>:3:32)
    at eval (module.esm.js?027e:1718:1)
    at tryCatch (module.esm.js?027e:1645:1)
    at HTMLInputElement.el._x_forceModelUpdate (module.esm.js?027e:2974:1)
    at eval (module.esm.js?027e:2985:1)
    at reactiveEffect (module.esm.js?027e:484:1)
    at Object.effect3 [as effect] (module.esm.js?027e:459:1)
    at effect (module.esm.js?027e:1299:1)
    at eval (module.esm.js?027e:2392:1)
    at wrappedEffect (module.esm.js?027e:1315:1)

<?php

namespace App\Http\Livewire\Forms\Persons;

use App\Models\Person;
use App\Models\Staff;
use Illuminate\Support\Collection;
use phpDocumentor\Reflection\Types\Boolean;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\Select;
use Tanthammar\TallForms\TallFormComponent;
use Tanthammar\TallFormsSponsors\DatePicker;
use Tanthammar\TallFormsSponsors\Email;
use Tanthammar\TallFormsSponsors\Tel;

class CreateOrUpdatePerson extends TallFormComponent
{
    public Collection $breads;
    public string  $formTitle = '';
    public array $staffs = [];
    public bool $show_birthday_and_certificate = true;
    public function mount(?Person $person)
    {
        $this->formTitle = $person->exists ?
            __('Edit :item ', ['item'=> $person->name])
            : __('Add :model ', ['model'=> __('Person')]);

        $this->breads = new Collection([
            ['text'=> __('Persons'), 'url'=> 'persons'],
            ['text'=> __($this->formTitle)],

        ]);

        //Gate::authorize()
        $this->mount_form($person); // $person from hereon, called $this->model
    }

    protected function formAttr(): array
    {
        return [
            'wrapWithView' => true,
            'showDelete' => false,
        ];
    }

    // OPTIONAL methods, they already exist
    protected function onCreateModel($validated_data)
    {
        $this->model = Person::create($validated_data);
    }

    protected function onUpdateModel($validated_data)
    {
        $this->model->update($validated_data);
    }

    protected function onDeleteModel()
    {
        $this->defaultDelete();
    }

    protected function beforeFormProperties()
    {
        // set the checkboxes options
        $this->staffs = Staff::orderBy('id','desc')->pluck('id', 'name')->all();
    }
    protected function fields(): array
    {
        return [
            Select::make(__('Staff'), 'staff_id')
                ->options($this->staffs)
                ->rules('required')
                ->colspan(6),

            Input::make(__('Name'),'name')
                ->rules('required')
                ->autocomplete('new-text')
                ->colspan(6),

            Email::make(__('Email'),'email')
                ->autocomplete('new-email')
                ->colspan(6),

            Tel::make(__('Phone'),'phone')
                ->autocomplete('new-tel')
                ->colspan(6),

           $this->show_birthday_and_certificate ? DatePicker::make(__('Birthday'),'birthday')
                ->locale('en')
                ->placeholder('Select a date...')
                ->includeExternalScripts() //only included once, if multiple DatePicker fields
                ->colspan(6) : null,

           $this->show_birthday_and_certificate ? Input::make(__('Certificate'),'certificate')
                ->rules('nullable')
                ->autocomplete("off")
                ->colspan(6) : null,

            Input::make(__('Address'),'address')
                ->rules('nullable')
                ->autocomplete('new-address'),
        ];
    }

    public function updatedStaffId($value)
    {
        if(filled($value) && ($value === "2" || $value === "5")){
            $this->show_birthday_and_certificate = false;
        }else{
            $this->show_birthday_and_certificate = true;
        }
    }

}

hi,

learned that commiting fixes to master is a bad idea, this is a extra branch replacing #111 pull request

first shot at the integration of imask.js ( https://imask.js.org/ ) into the input field, works for me

Input::make('datemasked')->maskOptions(
                "{mask: Date, lazy: false}"
            )

Input::make('Masktest', 'masktest')->rules('required')->maskOptions(
                    "{mask: '(00)00-00-00',  lazy: false,  placeholderChar: 'x' }"
                ),

possible enhancements:

• Get either the masked or unmasked value back from the imask object and not the input value
• make including js configurabe
• add docs ;)

allows rules for multiple files like ->rules(['files' => 'between:1,3', 'files.*' => 'required|max:1024']) so not only the individual file properties are validated but also e.g. the min/max number of uploaded files

hi,

first shot at the integration of imask.js ( https://imask.js.org/ ) into the input field, works for me

Input::make('datemasked')->maskOptions(
                "{mask: Date, lazy: false}"
            )

Input::make('Masktest', 'masktest')->rules('required')->maskOptions(
                    "{mask: '(00)00-00-00',  lazy: false,  placeholderChar: 'x' }"
                ),

possible enhancements:

• Get either the masked or unmasked value back from the imask object and not the input value
• make including js configurabe
• add docs ;)

Describe the bug

While using FileUpload inside of Repeater all image changes together, and sometimes the file field disappear please check the screenshots attached

Screenshots

Environment:

• Tall-forms version: 8.1
• Livewire version:2.5
• Laravel version: 8.6
• AlpineJS version (only needed if problem is Alpine related):3.7
• $wrapWithLayout true/false:false
  • if true, Are you using your own wrapper component or the default one?:
• Optional model binding? true
• Have you published the view files?: only resources/views/vendor/tall-forms/includes/file-loop.blade.php
• Have you published, and edited the config file?:no
• Is it a Create or Update form?:create

Fields Definition Please paste the code for your fields that is related to this issue.

    use WithFileUploads, UploadsFiles;

    public $main_image;
    public $extra_image;

    public function mount(?Item $item)
    {
        $this->mount_form($item);
    }

    protected function fields(): array
    {
        return [
            Repeater::make('variation')->fields([

                FileUpload::make("Main Image", 'main_image')
                    ->help('Max (720px * 720px), png, jpeg, gif or tiff')
                    ->rules('nullable|mimes:png,jpg,jpeg,gif,tiff|dimensions:width=720,height=720')
                    ->accept("image/*")->inline(),

                FileUpload::make("Extra Images", 'extra_image')
                    ->multiple()
                    ->help('Max (720px * 720px), png, jpeg, gif or tiff')
                    ->rules('nullable|mimes:png,jpg,jpeg,gif,tiff|dimensions:width=720,height=720')
                    ->accept("image/*")->inline(),

                Input::make('Name'),

                Input::make('Value')->type('color'),

            ])->confirmDelete()
                ->wrapperClass('grid grid-cols-2  divide-y mb-2 rounded border')
                ->labelEachRow()->sortable()
                ->help('Click plus to add variations')
            ,
        ];
    }

Hi, Reset is now working with Quill & Choice field.

I've added a full-screen option for Quill too. Fullscreen can be enabled by piping up ->allowFullScreen()

Thanks