Livewire save fields with same name

@rodrigo.pedra Thank you. I tried your solution but it doesn't work.

I tried a few things:

The component:

 protected $rules = ['qty'=>'array', 'qty.*'=>'numeric'];
    protected $messages = ['qty.*.numeric'=>'Please enter the quantity'];

My input field:

<input type="text" class="form-control @error('qty.{{$model->id}}') is-invalid @enderror"
     wire:model.lazy="qty.{{$model->id}}">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="button-addon-quantity" wire:click.prevent="addSpare({{$model->id}})">Add</button>
    </div>
    <x-display_error error="qty{{$model->id}}"/>
  </div>

No errors displayed now.

I tried:

<input type="text" class="form-control @error('qty') is-invalid @enderror"
     wire:model.lazy="qty.{{$model->id}}">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="button-addon-quantity" wire:click.prevent="addSpare({{$model->id}})">Add</button>
    </div>
    <x-display_error error="qty"/>
  </div>

All inputs get the error: The qty must be an array.

I also tried a few other things:

public function addSpare($spareId)
{
   if(empty($this->qty))
      $this->addError('qty.'.$spareId, 'Qty empty');
      
return Redirect::route('jobs.edit', ['job'=>$this->job, 'selectedTab'=>'#tab2']);

Didn't get the errors and it tried to do this:

$this->job->spares()->attach($spareId, ['qty' => $this->qty[$spareId]]);

which of course gave the error: Undefined offset: 13

I tried:

 public function addSpare($spareId)
    {
        $errors = $this->getErrorBag();
        if(empty($this->qty))
        
        $errors->add('qty.'.$spareId, 'Some message');
        
        $this->job->spares()->attach($spareId, ['qty' => $this->qty[$spareId]]);
        return Redirect::route('jobs.edit', ['job'=>$this->job, 'selectedTab'=>'#tab2']);
    }

Again, tried to do the attach part and gave me this error: Trying to access array offset on value of type null

I tried:

public function addSpare($spareId)
    {
       
        
        $this->withValidator(function (Validator $validator) use($spareId) {
            $validator->after(function ($validator) use($spareId){
                if (empty($this->qty)) {
                    $validator->errors()->add('qty.'.$spareId, 'Something is wrong with this field!');
                }
            });
        })->validate();

       $this->job->spares()->attach($spareId, ['qty' => $this->qty[$spareId]]);
        return Redirect::route('jobs.edit', ['job'=>$this->job, 'selectedTab'=>'#tab2']);
}

Didn't get any errors.

I ended up doing this:

public function addSpare($spareId)
    {
        if(empty($this->qty[$spareId)) {
            alert()->error('Error!', 'Please enter the quantity');
        } elseif(!is_numeric($this->qty[$spareId])) {
            alert()->error('Error!', 'The quanity must be a number');
        } else {
            $this->job->spares()->attach($spareId, ['qty' => $this->qty[$spareId]]);
        }

        return Redirect::route('jobs.edit', ['job'=>$this->job, 'selectedTab'=>'#tab2']);
    }

Lost the will to live LOL

Thanks for trying to help.

@SigalZ I tested it with this code:

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Component;

class Sample extends Component
{
    public $qty = [];

    public Collection $models;

    protected $rules = [
        'qty' => 'array',
        'qty.*' => 'numeric',
    ];

    protected $messages = [
        'qty.*.numeric' => 'Please enter the quantity',
    ];

    public function mount()
    {
        $this->models = User::query()
            ->take(10)
            ->get();
    }

    public function addSpare($spareId)
    {
        $this->validate();

        logger()->info('add spare', ['qty' => $this->qty[$spareId] ?? 0]);
        // return Redirect::back();
    }

    public function render()
    {
        return view('livewire.sample');
    }
}

<div>
    @foreach($models as $model)
        <div class="input-group">
            <input
                type="text"
                class="form-control @error('qty.' . $model->id) is-invalid @enderror"
                wire:model.lazy="qty.{{ $model->id }}">

            <div class="input-group-append">
                <button
                    class="btn btn-outline-secondary"
                    type="button"
                    id="button-addon-quantity"
                    wire:click.prevent="addSpare({{ $model->id }})">Add
                </button>
            </div>
        </div>


        @error('qty.' . $model->id)
        <p>{{ $message }}</p>
        @enderror
    @endforeach

    <ul>
        @forelse($qty as $key => $value)
            <li><strong>{{ $key }}:</strong> {{ $value }}</li>
        @empty
            <li><em>empty</em></li>
        @endforelse
    </ul>
</div>

<?php // ./routes/web.php

use Illuminate\Support\Facades\Route;

Route::view('/', 'welcome');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Sample</title>

    @livewireStyles
</head>
<body>
    <livewire:sample></livewire:sample>

    @livewireScripts
</body>
</html>

Note I added 10 users using the User Factory with the database seeder.

@rodrigo.pedra Thank you. Tried that. I get the log: local.INFO: add spare {"qty":0} but no errors on the view. so I'm not sure how it works for you.

Do you see the error on the view and only for the field you tried to add?

@SigalZ no errors, and also I got the <ul> list updated as I add values. Will send a screenshot soon, I am about to have lunch

@rodrigo.pedra well, if there are no errors it's not good. My main point is that the user tries to add empty qty and needs to get an error on the specific field he tried to add. So it goes to the log, but no error is displayed on the view to the user.

@SigalZ well I meant no errors when using an numeric value...

but you are right, validation is not triggered upon wire:model update.

I missed adding real-time validation:

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Component;

class Sample extends Component
{
    public $qty = [];

    public Collection $models;

    protected $rules = [
        'qty' => 'array',
        'qty.*' => ['required', 'integer'],
    ];

    protected $messages = [
        'qty.*.integer' => 'Please enter the quantity',
    ];

    public function mount()
    {
        $this->models = User::query()
            ->take(10)
            ->get();
    }
    
    /////////////////////////////////////////////////////////////////////
    // ADDED THIS
    /////////////////////////////////////////////////////////////////////
    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function addSpare($spareId)
    {
        $this->validate();

        logger()->info('add spare', ['qty' => $this->qty[$spareId] ?? 0]);
        // return Redirect::back();
    }

    public function render()
    {
        return view('livewire.sample');
    }
}

Now you will get validation upon input blur, and the info() will only write to the log if the input is validated.

Reference: https://laravel-livewire.com/docs/2.x/input-validation#real-time-validation

@rodrigo.pedra Thank you but I'm not sure you are getting what I'm struggling with.

I don't need a real time validation.

There is a table, with an input field called 'qty' and a button called 'Add' in each row.

When the user clicks the button, it calls a function on the component that validates the field and returns an error if the field is empty or a string.

The problem is, all the fields in the table display the error because they are all called 'qty'.

With the solution you provided, I didn't get any errors at all when I should have.

Even if I needed a real time validation I would get the same issue, all the fields would get the error.

Thank you for trying.