I have a component app/Livewire/Admin/Common/AssignUsers.php with AssignUsersForm form :

<?php

namespace AppLivewireAdminCommon;

use AppLivewireFormsAdminCommonAssignUsersForm;
use LivewireComponent;

class AssignUsers extends Component
{
    public AssignUsersForm $form;
    public bool $selectSupervisorUser;
    public bool $onlyStaff;

    public function mount(bool $selectSupervisorUser,  bool $onlyStaff)
    {
        $this->selectSupervisorUser = $selectSupervisorUser;
        $this->onlyStaff = $onlyStaff;
    }

    public function render()
    {
        return view('livewire.admin.common.assign-users');
    }
}

I created AssignUsersForm with command :

php artisan livewire:form Admin/Common/AssignUsersForm

and filled file app/Livewire/Forms/Admin/Common/AssignUsersForm.php with code :

<?php

namespace AppLivewireFormsAdminCommon;

use AppLibraryStaffUsers;
use AppLibrarySupervisorUsers;
use LivewireComponent;
use LivewireForm;

class AssignUsersForm extends Form
{
    public $selectedStaffUsers = [];
    public $staffUsersSelectionItems = [];
    public $supervisorUsersSelectionItems = [];

    function __construct(protected Component $component, protected $propertyName ) {
        parent::__construct($component, $propertyName);
        $this->staffUsersSelectionItems = StaffUsers::get(true);
        $this->supervisorUsersSelectionItems = SupervisorUsers::get(true);

    }

    public function addStaffUser()
    {
        dd("addStaffUser"); // I DO NOT SEE THIS MESSAGE
        $this->selectedStaffUsers[] = ['staff_user_id' => ''];
        Log::info(varDump($this->selectedStaffUsers, ' -1 addStaffUser  $this->selectedStaffUsers::'));
    }

    public function removeStaffUser($index)
    {
        dd("removeStaffUser");  // I DO NOT SEE THIS MESSAGE
        unset($this->selectedStaffUsers[$index]);
        $this->selectedStaffUsers = array_values($this->selectedStaffUsers);
    }

}

But calling addStaffUser and removeStaffUser from my resources/views/livewire/admin/common/assign-users.blade.php :

     $form::{{ print_r($form, true) }}


    <button class="btn btn-danger form-control" type="button"
        wire:click="$parent.form.removeStaffUser({{ $index }})">{!! AppIconFacade::get(IconEnum::Delete, title:'Delete this Staff user' ) !!}
    </button>


    <button class="btn btn-warning form-control" wire:click="form.addStaffUser" type="button">+ Add</button>

For the first button I got error in browser’s console :

Alpine Expression Error: $wire.$parent.form.removeStaffUser is not a function
Expression: "$wire.$parent.form.removeStaffUser(0)"

For the second nothing happens in browser’s console – but it seems as valid syntax.

Checking output of $form in the code above I see

AppLivewireFormsAdminCommonAssignUsersForm Object

mentioned.

How to make it working ?