We're using <x-form-group> with a couple of <x-form-radio> elements inside. When a value is selected and the form reloads due to validation errors, all radio elements have the checked='checked' attribute.

I think this is due to the fact that <x-form-radio> component is using a class which extends FormCheckbox and because of the presence of this line: https://github.com/protonemedia/laravel-form-components/blob/master/src/Components/FormCheckbox.php#L33

It could be fixed by changing FormRadio.php to the following:

<?php

namespace ProtoneMedia\LaravelFormComponents\Components;

class FormRadio extends Component
{
    use HandlesValidationErrors;
    use HandlesBoundValues;

    public string $name;
    public string $label;
    public $value;
    public bool $checked = false;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct(
        string $name,
        string $label = '',
        $value = 1,
        $bind = null,
        bool $default = false,
        bool $showErrors = true
    ) {
        $this->name       = $name;
        $this->label      = $label;
        $this->value      = $value;
        $this->showErrors = $showErrors;

        if (old($name) == $value) { <== CHANGE
            $this->checked = true;
        }

        if (!session()->hasOldInput() && $this->isNotWired()) {
            $boundValue = $this->getBoundValue($bind, $name);

            $this->checked = is_null($boundValue) ? $default : $boundValue == $value; <== CHANGE
        }
    }
}

Bootstrap 5 is out of beta and has some real improvements for forms.

Hereby the bootstrap 5 version of laravel-form-components including floating labels.

With bootstrap 5 form-group has been removed. It's still a component because it can be used for inline radio's and check boxes with validation.

prepend and append are also removed. This is replaced by input-group and can contain basically anything (just text, but also buttons and radio's).

Read more here: Bootstrap 5 migration: Forms

This has also been covered in the readme.

Closes: #50

For this issue I copied the example from the readme:

<x-form-select name="country_code">
   <option value="be">Belgium</option>
   <option value="nl">The Netherlands</option>
</x-form-select>

suppose that we generated the above options with a $options array. This will work:

$options = ['be' => 'Belgium', 'nl' => 'The Netherlands'];
<x-form-select name="country_code" :options="$options">

But the following will not work correctly:

$options = ['Belgium','The Netherlands'];
<x-form-select name="country_code" :options="$options">

The above will generate this HTML:

<select name="country_code">
                            <option value="0">
                    Belgium
                </option>
                            <option value="1">
                    The Netherlands
                </option>
                    </select>

This will not correctly bind the old values of the form when the user made an error. The form will be reloaded with the error messages in it but without the selected item from the select list. The reason for this lies in the file src/Components/FormSelect.php on line 51: if ($this->selectedKey === $key) { this will return false every time because $this->selectedKey is a string and $key is an integer. Is it possible to change the === to ==? The example with the country_code does not make much sense at first. But if I want to generate the form options from an eloquent relation (and other data than country codes), I have exactly this problem. The ID of the foreign key is an int and the above mentioned if will never return true.

Hello,

When I do this :

@bind($model)
<x-form-select
  multiple
  name="categories[]"
  :options="App\Models\Categories::options()"
/>
@endbind($model)

Categories are saved, but they are not selected on page reload : no selected attribute on the <option> tags ,

am I doing it wrong ?

BTW this is my App\Models\Categories::options() :

[
   1 => "Justice",
   2 => "Culture",
   3 => "Agriculture"
]

Maybe I'm missing something obvious here, but I've installed the package and I'm still getting errors trying to load any component, e.g.Unable to locate a class or view for component [form.form-input].

I thought perhaps it wasn't registering properly so I tried adding the Service Provider in app.config, but that made no difference.

ProtoneMedia\LaravelFormComponents\Components\FormCheckbox. Starts on line 45 ... if (is_array($boundValue)) { $this->checked = in_array($value, $boundValue); return; } ... What about collection support?

Thanks for this library, saves me a lot of time.

I noticed when I'm using Livewire the errors don't show. It's because in Livewire the errors are not in the session, so this line always returns an empty bag.

I also noticed that the check for hasError is not that usefull because in the layouts it's always wrapped in the @error directive. Like form-errors.blade.php

Maybe just get rid of the hasError part and just use the showError, it should be compatible with Livewire that way and you don't double check for errors.

What's your opinion on this?

Hi,

I have boolean field create_role (0 or 1) from my database that I've bound to a radio input :

@bind($user)
       <x-form-group class="ms-3" label="Is this user able to create new articles?" inline>
           <x-form-radio name="create_article" value="0" label="no" default/>
           <x-form-radio name="create_article" value="1" label="yes"/>
       </x-form-group>
@endbind

But if I edit or update with a wrong validation another field, value 0 (false is the same) is not bound. Its because of the comparison in the ProtoneMedia\LaravelFormComponents\Components\FormRadio.php file at line 31 and line 38

Is there any simple way you use to fix that problem? I've already fixed it by my own but not sure its the better one...

I have modified the same file as before like this :

<?php

namespace ProtoneMedia\LaravelFormComponents\Components;

class FormRadio extends Component
{
    use HandlesValidationErrors;
    use HandlesBoundValues;

    public string $name;
    public string $label;
    public $value;
    public bool $checked = false;

    public function __construct(
        string $name,
        string $label = '',
        $value = 1,
        $bind = null,
        bool $default = false,
        bool $showErrors = false
    ) {
        $this->name       = $name;
        $this->label      = $label;
        $this->value      = $value;
        $this->showErrors = $showErrors;

        $inputName = static::convertBracketsToDots($name);

        //modified line
        if (!is_null(old($inputName))) {
            //modified line
            $this->checked = $this->toStringIfFalse(old($inputName)) == $value;
        }

        if (!session()->hasOldInput() && $this->isNotWired()) {
            $boundValue = $this->getBoundValue($bind, $name);

            if (!is_null($boundValue)) {
                //modified line
                $this->checked = $this->toStringIfFalse($boundValue) == $this->value;
            } else {
                $this->checked = $default;
            }
        }
    }

    /**
     * Generates an ID by the name and value attributes.
     *
     * @return string
     */
    protected function generateIdByName(): string
    {
        return "auto_id_" . $this->name . "_" . $this->value;
    }

    /**
     * All of the non-string boolean values considered false are casted to string
     * so that it can be correctly compared with the input radio value
     * (string values considered false like "0" or "" are already correctly compared)
     * 
     * @return string
     */
    protected function toStringIfFalse($value)
    {
        if($value === false ||
           $value === 0 ||
           $value === 0.0 ||//im not sure this one
           $value === -0.0 // and this one will find concrete cases...
        ){
            return var_export($value, true);
        }
        return $value;
    }
}

After 2.5.1, it seems that Checkboxes and Radio buttons are broken when used in a Grouped setting. This is because the ID was previously being dynamically generated which was replaced to simply use the name attribute.

As the id attribute is the same for multiple inputs targeting the same option, the value will not change between different options.

Please see attached screenshot comparing this with 2.5.1 and 2.1.1:

2.5.1 (broken):

2.1.1 (working):

Hi, I was wondering if it could be possible to pass help text directly through an attribute like any other parameters ? something like this :

<x-form-input
  name="name"
  label="Name"
  help="Your name will not be visible"
/>

Thanks !!

I'm using livewire query to get options for select, for example, I have this in my blade:

       <x-form-select
                   name="area_group[]"
                   :options="$area_group" />

and in my livewire this:

public
        $area_group;

    public function mount()
    {
        $this->area_group = AreaGroup::query()->select('id', 'name')->get();
    }

but the result on the view is a select options in json

<option value="0">
                    {"id":1,"name":"\u30cf\u30ef\u30a4"}
                </option>

And I want to get that ID as value and name as option, how can I solve it?

when my installation was done after that iam trying to give "Unable to locate class or view [{$alias}] for component [{$component}]." this error was displaying

When validating an array Laravel lets us validate array items using the fieldname.* syntax which can result in the error bag containing messages which are returned as fieldname.<array_index>.

These are not output at the moment, this PR is a simple fix to (recursively) output them if they exist.

I've just extended the <x-form-errors> component to output them as their own messages, an enhancement might be to make them smarter or display in a more inline way..

There were no existing tests for form-errors, so apologies for not adding one and starting those.

Checked Box For Loop Code

`

Please Check the below Attachment for the clear look on issue

Thanks in Advance..

According to BS5 docs, form labels should contain .form-label class to be displayed correctly. Without it, the space between label and field is too small.

Before:

After:

Hello,

I would like to make a suggestion for a modification to x-form-submit which I would create a pull request for but I am not sure how this will work in anything other than Bootstrap.

If I have a form that has a file upload and I click submit (x-form-submit) before the file has finished uploading via livewire, the validation will fail as the file has not been uploaded.

Can I suggest that x-form-submit has wire:loading.attr="disabled" by default?

This will disable the submit button while livewire is processing.

In my use case I have done the following:

<x-form-input wire:model="cv" label="Upload Your CV *" type="file" name="cv" />
<div wire:loading wire:target="cv">
    Please wait, file is uploading...
</div>
<x-form-submit wire:loading.attr="disabled">Submit</x-form-submit>

I can not think of any instance where you would want someone to be able to click the submit button before livewire has finished updating the server.