Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

shyberry's avatar

Livewire Form data does not render in the input field

I have this livewire form:

namespace App\Livewire\Forms\System;

use App\Models\StructureOrganization;
use Livewire\Attributes\Rule;
use Livewire\Form;
use Illuminate\Support\Str;

class OrganizationComponentForm extends Form
{       
    public ?StructureOrganization $organization;

    #[Rule('required')]
    public $header_id;
    #[Rule('required|numeric')]
    public $level;
    #[Rule('required|min:2')]
    public $levelType;
    #[Rule('required|min:3')]
    public $name;
    #[Rule('nullable')]
    public $description;
    #[Rule('nullable')]
    public $category;
    #[Rule('nullable')]
    public $parent;
    #[Rule('boolean')]
    public $canContain;
    #[Rule('boolean')]
    public $adjacentParentOnly;
    #[Rule('boolean')]
    public $adjacentChildOnly;
    #[Rule('boolean')]
    public $allowMultiplePersonnel;
    #[Rule('nullable|numeric')]
    public $maxPersonnel;   
}

And I bind it to this blade view (my concern is the $maxPersonnel field):

<div class="w-full sm:w-1/2 mt-2">
   <p class="mb-2 font-semibold text-gray-700">Personnel Assignment</p>
   <div class="flex items-center gap-x-1">
      <input type="checkbox" name="multiplePersonnel" id="multiplePersonnel" 
           class="p-2 h-5 w-5 bg-white border border-gray-200 rounded shadow-sm uppercase align-middle"
           wire:model.live="form.allowMultiplePersonnel" >
      <label for="multiplePersonnel" class="align-middle" title="When checked, this component is allowed to be assigned many employees">Allow Multiple Personnel</label>

      <input type="number" min="1" name="maxPerson" id="maxPerson"
           class="px-2 py-0.5 w-20 bg-white border border-gray-200 rounded shadow-sm align-middle"  
           title="Max number of personnel" 
           wire:model="form.maxPersonnel" wire:key="maxPersonnel" > 
           {{$form->maxPersonnel}}
   </div>
</div>

The problem is that the value that I assign for maxPersonnel is not rendered in the input field:

public function updatedform($value, $key)
{      
        $id = substr($key,0, strpos($key, '.'));
        $property = substr($key,strpos($key, '.')); <
        
        if ($property=='allowMultiplePersonnel'){
            if ($value==true){
                $this->form->maxPersonnel=2;
            }else{
                $this->form->maxPersonnel=1;
            }            
        }       
    }
0 likes
2 replies
shyberry's avatar

I just discovered the way to do it by simply adding the value attribute for input, plus wire:model.fill:

<input
			type="number" min="1"
            name="maxPerson"
            class="px-2 py-0.5 w-20 bg-white border border-gray-200 rounded shadow-sm align-middle"
            id="maxPerson"
            title="Max number of personnel"
            wire:model.fill="form.maxPersonnel" wire:key="maxPersonnel"
            value="{{$form->maxPersonnel}}"                                   
>
valentin_vranic's avatar

Hi, I'm glad you've solved your issue. I have two notices:

  1. not a good practice to use name and value attributes with livewire for inputs. Where you've declared the $maxPersonnel in your form you haven't assigned any value there, I guess that's why you don't see it in you view file. Except if you overrided it somewhere in the lifecycle methods (etc. mount(), render())

  2. I think the updatedform lifecycle hook is supposed to be camelCase like updatedForm or updatedFormMaxPersonnel which catches only the specific property change

Please or to participate in this conversation.